Images KO only on test environment (not development) after Webpack 4 upgrade

[ghost]

Hello everyone,

I recently upgraded my Rails app to Webpacker 4, following the docs. After a while (damn' you Babel...) everything seems working on my development environment. But for some reason on test environment, I got an issue with manifest.json not including my images (as it does for development).

I tried this and this but without any success 😞

I tried to figure what could be the differences between both environments, but nothing that could lead to that problem, I guess.

For your information I'm using a dockerized Rails application, with Webpacker on his own container for development mode, and everything on the same container (Webpacker and Rails) on test and production.

[EDIT]
Sorry I was not sure about what informations you would need... Here are what has been asked, with apologies:

1. Here is a quick view of my file system:

app
|- controllers
|- helpers
|- ...
|- models
|- views
|- webpacker (instead of)
|  |- fonts
|  |- images
|  |- js
|  |  |- packs
|  |- sass

2. JS files are included quite "traditionally", using packs and javascript_pack_tag helpers in views.
   CSS unique file is imported through the stylesheet_pack_tag helper. Fonts are imported directly in my SASS main file (using @font-face). Images are also used in SASS files, but most of the time using image_pack_tag helpers in views.

3 & 4. Here are some gists, as asked:

• Docker Compose files (test and development env.): https://gist.github.com/soykje/5fd0a95d79bae0b0291f2f1fce1db12c
• manifest.json files (test and development env.): https://gist.github.com/soykje/8a5bd94708a7f53cc4671780ede981ee
• package.json: https://gist.github.com/soykje/106af2031e794105714a492fde4b52c2
• babel.config.js: https://gist.github.com/soykje/b59f1fbe900a7bf4b926e58f4765c0be
• config/webpack/environment.js and config/webpacker.yml: https://gist.github.com/soykje/ec1255e0dbdc68e87a5eaf9728509892
• app/javascript/packs/application.js (in my case app/webpacker/js/packs/application.js): https://gist.github.com/soykje/991c39aec7c0f281d5977dfd00e94a70

[jakeNiemiec]

In order to help debug, could you please post as much as you can of:

• Where are the images located on the file system?
• How are you including them?
• Can you tell me more about how webpacker is in an isolated container?
• Can you post much as you can of these files to a https://gist.github.com?
  • manifest.json for both test & dev
  • ./package.json
  • ./babel.config.js
  • ./config/webpack/environment.js
  • ./config/webpacker.yml
  • ./app/javascript/packs/application.js

[ghost]

@jakeNiemiec Thank you for your quick answer, and all my apologies for the lack of information 😕
I just edited my question with the informations you asked for... Hope that will help to find a solution!

Thx in advance!

[ghost]

@jakeNiemiec I can confirm that the problem seems to appear only on test environment: I just tried with my production mode and everything works fine. Also in production Webpacker is not in an isolated container (as test env.)... I'll continue digging ⛏️

[EDIT] As I guessed, by only changing the RAILS_ENV from test to production in my Compose file make things work. So seems to be due to something specific to this test environment 🤔

[jakeNiemiec]

I can't dig in too much today, but you could you confirm if adding these missing lines from the docs fixes anything: https://www.diffchecker.com/gvk0auKz

I think the file-loader is probably at fault. There have been quite a few issues on it.

[ghost]

@jakeNiemiec I confirm that adding the missing lines on babel.config.js didn't solve the problem. However I was able to solve my problem, by changing my package.json as follows:

{
  "name": "beweeg-app",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "4.0.7",
    "@soykje/lscss": "1.1.6",
    "activestorage": "^5.2.2",
    "babel-upgrade": "^1.0.1",
    "jquery": "^3.3.1",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "rails-ujs": "^5.2.2",
    "react": "^16.8.2",
    "react-big-calendar": "^0.20.3",
    "react-dom": "^16.8.2",
    "react-stars": "^2.2.5",
    "resolve-url-loader": "^3.1.0",
    "select2": "4.0.2",
    "stylelint": "^9.10.1",
    "stylelint-config-airbnb": "^0.0.0",
    "stylelint-order": "^2.0.0",
    "stylelint-scss": "^3.5.3",
    "stylelint-webpack-plugin": "^0.10.5",
    "turbolinks": "^5.2.0"
  },
  "devDependencies": {
    "webpack-dev-server": "3.7.2"
  }
}

Apparently, declaring such packages as Babel or Stylelint as devDependencies leads to an issue with Webpacker... I don't understand the reason, as for me, it should be declared so, isn't it?

[jakeNiemiec]

🙃 I should have caught that first. devDependencies don't get installed when the env is not development. (hence the namesake)

[ghost]

@jakeNiemiec Hmmm... The thing I don't get, is that it was working on production... Differences between dependencies and devDependencies have always been blurry to me, but if it was only that, then it shouldn't have been working on production too, isn't?
I'm still wondering if the babel.config.js couldn't also be partially responsible, as it includes some specific arguments for test environment... What do you think about it?

[jakeNiemiec]

There is a storied history to this problem. I link many relevant issues in #1880 but #1212 (comment) is a good, encompassing discussion.

it shouldn't have been working on production too

I would crack open the packed files to see if there are any polyfills present. It may be skipping babel step, thus no error.

[guillaumebriday]

Is this still an issue for you?

Feel free to reopen if needed