Search code examples
ruby-on-railswebpackjsbundling-rails

Forced to run assets:precompile two times to get the webpack builds copied to public directory

after long list of issues with rails/webpack there is a last one that hard to understand to fix properly.

I use:

  • rails with jsbundling-rails and sprockets-rails
  • webpack
  • yarn (switched from npm because the command assets:precompile forced me)

When I run the command assets:precompile (in fresh cloned code), yarn install is executed, then webpack build it's stuff to app/assets/builds (as configured in webpack.config.js) and finally jsbundling copy the files into the public/assets folder. But... the files builded in app/assets/builds are not copied to public/assets. I have to run the command a second time and then it's ok. As a workaround, I run the command twice in the CI to build the docker image properly for the production, but it's surprising... the behavior is like if the copy begin before webpack emits its compiled files... 🤷‍♂️ (so the second time the copy work because compiled files are here).

First run output:

yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.87s.
yarn run v1.22.19
$ webpack
assets by path fonts/ 820 KiB
  assets by path fonts/*.ttf 568 KiB
    asset fonts/fa-solid-900.ttf 385 KiB [emitted] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf] [big] (auxiliary name: application)
    asset fonts/fa-brands-400.ttf 183 KiB [emitted] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf] (auxiliary name: application)
  assets by path fonts/*.woff2 252 KiB
    asset fonts/fa-solid-900.woff2 147 KiB [emitted] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2] (auxiliary name: application)
    asset fonts/fa-brands-400.woff2 105 KiB [emitted] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2] (auxiliary name: application)
assets by path *.css 312 KiB
  asset application.css 311 KiB [emitted] [minimized] [big] (name: application) 1 related asset
  asset mailer.css 686 bytes [emitted] [minimized] (name: mailer) 1 related asset
  asset document.css 0 bytes [emitted] [minimized] (name: document)
asset application.js 667 KiB [emitted] [minimized] [big] (name: application) 2 related assets
Entrypoint application [big] 978 KiB (3.83 MiB) = application.css 311 KiB application.js 667 KiB 6 auxiliary assets
Entrypoint mailer 686 bytes (88.4 KiB) = mailer.css 1 auxiliary asset
Entrypoint document = document.css
orphan modules 2.55 MiB (javascript) 820 KiB (asset) 2.89 KiB (runtime) [orphan] 247 modules
runtime modules 1.21 KiB 5 modules
cacheable modules 1.52 MiB (javascript) 329 KiB (css/mini-extract)
  modules by path ./node_modules/ 161 KiB 14 modules
  modules by path ./app/assets/ 1.36 MiB (javascript) 329 KiB (css/mini-extract)
    javascript modules 1.36 MiB
      ./app/assets/javascripts/application.js + 150 modules 1.36 MiB [built] [code generated]
      + 3 modules
    css modules 329 KiB
      css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./app/assets/stylesheets/application.scss 328 KiB [built] [code generated]
      + 2 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.ttf (385 KiB)
  application.css (311 KiB)
  application.js (667 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (978 KiB)
      application.css
      application.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.87.0 compiled with 3 warnings in 38925 ms
Done in 41.06s.
I, [2023-07-07T17:41:37.445606 #1]  INFO -- : Writing /srv/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2023-07-07T17:41:37.445936 #1]  INFO -- : Writing /srv/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
// removed my application files (images)
I, [2023-07-07T17:41:37.524605 #1]  INFO -- : Writing /srv/public/assets/turbo-4851a9a0b1d947e810dfd0448a72aef261d455183ebea681f4f28a73640a9ece.js
I, [2023-07-07T17:41:37.532303 #1]  INFO -- : Writing /srv/public/assets/turbo-4851a9a0b1d947e810dfd0448a72aef261d455183ebea681f4f28a73640a9ece.js.gz
I, [2023-07-07T17:41:37.535589 #1]  INFO -- : Writing /srv/public/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js
I, [2023-07-07T17:41:37.539658 #1]  INFO -- : Writing /srv/public/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js.gz
I, [2023-07-07T17:41:37.546266 #1]  INFO -- : Writing /srv/public/assets/turbo.min.js-8bc8f4a58d1c106d58dec8bef6c638ff12ff4d078f19d8ebd8c4277f4c9bc85a.map
I, [2023-07-07T17:41:37.548669 #1]  INFO -- : Writing /srv/public/assets/turbo.min.js-8bc8f4a58d1c106d58dec8bef6c638ff12ff4d078f19d8ebd8c4277f4c9bc85a.map.gz
I, [2023-07-07T17:41:37.550194 #1]  INFO -- : Writing /srv/public/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js
I, [2023-07-07T17:41:37.551619 #1]  INFO -- : Writing /srv/public/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js.gz
I, [2023-07-07T17:41:37.552240 #1]  INFO -- : Writing /srv/public/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js
I, [2023-07-07T17:41:37.552593 #1]  INFO -- : Writing /srv/public/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js.gz
I, [2023-07-07T17:41:37.553620 #1]  INFO -- : Writing /srv/public/assets/trix-ac629f94e04ee467ab73298a3496a4dfa33ca26a132f624dd5475381bc27bdc8.css
I, [2023-07-07T17:41:37.555522 #1]  INFO -- : Writing /srv/public/assets/trix-ac629f94e04ee467ab73298a3496a4dfa33ca26a132f624dd5475381bc27bdc8.css.gz
I, [2023-07-07T17:41:37.558989 #1]  INFO -- : Writing /srv/public/assets/es-module-shims-69d0cb4dc1d01c9dc2ed52f2ab66874fd545fe7e35c7841009b4e8c55f231dee.js
I, [2023-07-07T17:41:37.560070 #1]  INFO -- : Writing /srv/public/assets/es-module-shims-69d0cb4dc1d01c9dc2ed52f2ab66874fd545fe7e35c7841009b4e8c55f231dee.js.gz
I, [2023-07-07T17:41:37.561524 #1]  INFO -- : Writing /srv/public/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js
I, [2023-07-07T17:41:37.565186 #1]  INFO -- : Writing /srv/public/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js.gz
I, [2023-07-07T17:41:37.567158 #1]  INFO -- : Writing /srv/public/assets/es-module-shims.js-c69f1a5dd068dfc08a4cedc0ad77b792985bf256e162852bd03cdf764b666c4a.map
I, [2023-07-07T17:41:37.568719 #1]  INFO -- : Writing /srv/public/assets/es-module-shims.js-c69f1a5dd068dfc08a4cedc0ad77b792985bf256e162852bd03cdf764b666c4a.map.gz
I, [2023-07-07T17:41:37.571255 #1]  INFO -- : Writing /srv/public/assets/stimulus-1bd52683afde5c8ff5572f5d49429cea5bf7744ca636fcb830c015d8cccf353e.js
I, [2023-07-07T17:41:37.571877 #1]  INFO -- : Writing /srv/public/assets/stimulus-1bd52683afde5c8ff5572f5d49429cea5bf7744ca636fcb830c015d8cccf353e.js.gz
I, [2023-07-07T17:41:37.574041 #1]  INFO -- : Writing /srv/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js
I, [2023-07-07T17:41:37.575693 #1]  INFO -- : Writing /srv/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js.gz
I, [2023-07-07T17:41:37.578330 #1]  INFO -- : Writing /srv/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js
I, [2023-07-07T17:41:37.579039 #1]  INFO -- : Writing /srv/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js.gz
I, [2023-07-07T17:41:37.581233 #1]  INFO -- : Writing /srv/public/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js
I, [2023-07-07T17:41:37.587586 #1]  INFO -- : Writing /srv/public/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js.gz
I, [2023-07-07T17:41:37.590919 #1]  INFO -- : Writing /srv/public/assets/stimulus.min-d03cf1dff41d6c5698ec2c5d6a501615a7a33754dbeef8d1edd31c928d17c652.js
I, [2023-07-07T17:41:37.591492 #1]  INFO -- : Writing /srv/public/assets/stimulus.min-d03cf1dff41d6c5698ec2c5d6a501615a7a33754dbeef8d1edd31c928d17c652.js.gz
I, [2023-07-07T17:41:37.592633 #1]  INFO -- : Writing /srv/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js
I, [2023-07-07T17:41:37.593696 #1]  INFO -- : Writing /srv/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js.gz
I, [2023-07-07T17:41:37.595387 #1]  INFO -- : Writing /srv/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js
I, [2023-07-07T17:41:37.595881 #1]  INFO -- : Writing /srv/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js.gz
I, [2023-07-07T17:41:37.596629 #1]  INFO -- : Writing /srv/public/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js
I, [2023-07-07T17:41:37.597384 #1]  INFO -- : Writing /srv/public/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js.gz
I, [2023-07-07T17:41:37.599151 #1]  INFO -- : Writing /srv/public/assets/stimulus.min.js-0f3bbd3e2e72e4d7178153a52d180de4086e47082ecfc388ce82a90d8a3d7480.map
I, [2023-07-07T17:41:37.601141 #1]  INFO -- : Writing /srv/public/assets/stimulus.min.js-0f3bbd3e2e72e4d7178153a52d180de4086e47082ecfc388ce82a90d8a3d7480.map.gz
I, [2023-07-07T17:41:37.602650 #1]  INFO -- : Writing /srv/public/assets/activestorage-3ab61e47dd4ee2d79db525ade1dca2ede0ea2b7371fe587e408ee37b7ade265d.js
I, [2023-07-07T17:41:37.604317 #1]  INFO -- : Writing /srv/public/assets/activestorage-3ab61e47dd4ee2d79db525ade1dca2ede0ea2b7371fe587e408ee37b7ade265d.js.gz
I, [2023-07-07T17:41:37.604719 #1]  INFO -- : Writing /srv/public/assets/activestorage.esm-01f58a45d77495cdfbdfcc872902a430426c4391634ec9c3da5f69fbf8418492.js
I, [2023-07-07T17:41:37.604945 #1]  INFO -- : Writing /srv/public/assets/activestorage.esm-01f58a45d77495cdfbdfcc872902a430426c4391634ec9c3da5f69fbf8418492.js.gz
I, [2023-07-07T17:41:37.605207 #1]  INFO -- : Writing /srv/public/assets/actioncable-5433453f9b6619a9de91aaab2d7fc7ff183e5260c0107cbc9a1aa0c838d9a74e.js
I, [2023-07-07T17:41:37.605576 #1]  INFO -- : Writing /srv/public/assets/actioncable-5433453f9b6619a9de91aaab2d7fc7ff183e5260c0107cbc9a1aa0c838d9a74e.js.gz
I, [2023-07-07T17:41:37.605778 #1]  INFO -- : Writing /srv/public/assets/actioncable.esm-e01089c3ec4fe7817fa9abcad06cab6bdc387f95f0ca6aab4bf7ba7537f70690.js
I, [2023-07-07T17:41:37.605948 #1]  INFO -- : Writing /srv/public/assets/actioncable.esm-e01089c3ec4fe7817fa9abcad06cab6bdc387f95f0ca6aab4bf7ba7537f70690.js.gz

Second execution:

yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.88s.
yarn run v1.22.19
$ webpack
assets by path fonts/ 820 KiB
  assets by path fonts/*.ttf 568 KiB
    asset fonts/fa-solid-900.ttf 385 KiB [compared for emit] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf] [big] (auxiliary name: application)
    asset fonts/fa-brands-400.ttf 183 KiB [compared for emit] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf] (auxiliary name: application)
  assets by path fonts/*.woff2 252 KiB
    asset fonts/fa-solid-900.woff2 147 KiB [compared for emit] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2] (auxiliary name: application)
    asset fonts/fa-brands-400.woff2 105 KiB [compared for emit] [from: node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2] (auxiliary name: application)
assets by path *.css 312 KiB
  asset application.css 311 KiB [compared for emit] [minimized] [big] (name: application) 1 related asset
  asset mailer.css 686 bytes [compared for emit] [minimized] (name: mailer) 1 related asset
  asset document.css 0 bytes [compared for emit] [minimized] (name: document)
asset application.js 667 KiB [compared for emit] [minimized] [big] (name: application) 2 related assets
Entrypoint application [big] 978 KiB (3.83 MiB) = application.css 311 KiB application.js 667 KiB 6 auxiliary assets
Entrypoint mailer 686 bytes (88.4 KiB) = mailer.css 1 auxiliary asset
Entrypoint document = document.css
orphan modules 2.55 MiB (javascript) 820 KiB (asset) 2.89 KiB (runtime) [orphan] 247 modules
runtime modules 1.21 KiB 5 modules
cacheable modules 1.52 MiB (javascript) 329 KiB (css/mini-extract)
  modules by path ./node_modules/ 161 KiB 14 modules
  modules by path ./app/assets/ 1.36 MiB (javascript) 329 KiB (css/mini-extract)
    javascript modules 1.36 MiB
      ./app/assets/javascripts/application.js + 150 modules 1.36 MiB [built] [code generated]
      + 3 modules
    css modules 329 KiB
      css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./app/assets/stylesheets/application.scss 328 KiB [built] [code generated]
      + 2 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.ttf (385 KiB)
  application.css (311 KiB)
  application.js (667 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (978 KiB)
      application.css
      application.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.87.0 compiled with 3 warnings in 37803 ms
Done in 39.75s.
I, [2023-07-07T17:43:02.412265 #1]  INFO -- : Writing /srv/public/assets/application-35848cd1492d48b4309b0f94b61041b45367b3c88b40a8ec446a42fbbccf7c4f.css
I, [2023-07-07T17:43:02.412984 #1]  INFO -- : Writing /srv/public/assets/application-35848cd1492d48b4309b0f94b61041b45367b3c88b40a8ec446a42fbbccf7c4f.css.gz
I, [2023-07-07T17:43:02.413873 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-solid-900-c15a3b77a1df1d41545fcaa78bca78411ba2c1dd2f1a08f61be156bf463a4925.woff2
I, [2023-07-07T17:43:02.417531 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-solid-900-8254be23b50ccdd44fb95da3be612dba6548398b35ae990c87342ef0f5c0b926.ttf
I, [2023-07-07T17:43:02.420742 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-solid-900-8254be23b50ccdd44fb95da3be612dba6548398b35ae990c87342ef0f5c0b926.ttf.gz
I, [2023-07-07T17:43:02.422070 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-brands-400-71069435092e2b6c23cd74d2dcbb1b2f2f12e0da5f79f9a978d19c863c7b2846.woff2
I, [2023-07-07T17:43:02.424849 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-brands-400-57a98fe5c49399cacfe08ae0c15a27d848717559c82e0a44351babebdb5f80cb.ttf
I, [2023-07-07T17:43:02.440974 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-brands-400-57a98fe5c49399cacfe08ae0c15a27d848717559c82e0a44351babebdb5f80cb.ttf.gz
I, [2023-07-07T17:43:02.441724 #1]  INFO -- : Writing /srv/public/assets/application.css-bd63fb6e806f1ff28b45920fc9882316ee8942b5daf58594699390516dbdd916.map
I, [2023-07-07T17:43:02.450383 #1]  INFO -- : Writing /srv/public/assets/application-463b75aa95834378675b3403de79acc32ff1dac12f1c06fdd5ffbaa155bd6699.js
I, [2023-07-07T17:43:02.451465 #1]  INFO -- : Writing /srv/public/assets/application-463b75aa95834378675b3403de79acc32ff1dac12f1c06fdd5ffbaa155bd6699.js.gz
I, [2023-07-07T17:43:02.452618 #1]  INFO -- : Writing /srv/public/assets/application.js.LICENSE-745370248ae8913cc0f319511d41079cc6c4d77aad4511b01a52f6f5f91d694f.txt
I, [2023-07-07T17:43:02.453503 #1]  INFO -- : Writing /srv/public/assets/application.js.LICENSE-745370248ae8913cc0f319511d41079cc6c4d77aad4511b01a52f6f5f91d694f.txt.gz
I, [2023-07-07T17:43:02.454835 #1]  INFO -- : Writing /srv/public/assets/application.js-3257015c5b8246a2e8c266bc1c8268473bd14a1bade6e148eb2af1a6c2266814.map
I, [2023-07-07T17:43:02.460830 #1]  INFO -- : Writing /srv/public/assets/application.js-3257015c5b8246a2e8c266bc1c8268473bd14a1bade6e148eb2af1a6c2266814.map.gz
I, [2023-07-07T17:43:02.462258 #1]  INFO -- : Writing /srv/public/assets/document-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2023-07-07T17:43:02.463038 #1]  INFO -- : Writing /srv/public/assets/document-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2023-07-07T17:43:02.468231 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-brands-400-57a98fe5c49399cacfe08ae0c15a27d848717559c82e0a44351babebdb5f80cb.ttf.gz
I, [2023-07-07T17:43:02.471371 #1]  INFO -- : Writing /srv/public/assets/fonts/fa-solid-900-8254be23b50ccdd44fb95da3be612dba6548398b35ae990c87342ef0f5c0b926.ttf.gz
I, [2023-07-07T17:43:02.473643 #1]  INFO -- : Writing /srv/public/assets/mailer-5deacbeb1b407e6ac5869de2622fb67f51f8b0b684d9655b193c56c87296d0cc.css
I, [2023-07-07T17:43:02.474215 #1]  INFO -- : Writing /srv/public/assets/mailer-5deacbeb1b407e6ac5869de2622fb67f51f8b0b684d9655b193c56c87296d0cc.css.gz
I, [2023-07-07T17:43:02.474680 #1]  INFO -- : Writing /srv/public/assets/mailer.css-3dc564609f4e2f4be522dae30714218bed24584100f6b66e718541f35fa320bb.map

As you can see, webpack make the same in the first and second execution. But emitted files are copied only on the second execution (application.css application.js)... 🤔 Thank you in advance, I can provide more configurations if needed.

Solution

  • Self answering: webpack, on build, removes the app/assets/builds folder (because of the clean directive in webpack.config.js) that then causing the issue with assets:precompile. I've added a .keep file in it and added an exception for the clean config:

    module.exports = {
  // ...
  output: {
    // ...
    clean: {
      keep: ".keep",
    }
  }
}