Webpacker: Updating @rails/webpacker from 4.0.7 to 4.1.0+ breaks hmr

[majkelcc]

👋

After updating @rails/webpacker from 4.0.7 to 4.1.0, hmr is no longer working - changing scss file results in a full page reload. I didn't make any changes to my configuration files.

When I only update the gem and keep npm package at 4.0.7, hmr is still working. I also tried the latest 4.2.2 version of npm package, which also breaks hmr in my application.

[jakeNiemiec]

For anyone else, here is the diff between the versions: https://github.com/rails/webpacker/compare/v4.0.7...v4.1.0

After reviewing everything, I think the issue stems from https://github.com/rails/webpacker/pull/2242 since hmr was removed in: https://github.com/webpack-contrib/style-loader/pull/400

---

https://github.com/rails/webpacker/blob/ce9c210fa4670948ba6f5af95ebf7f69a08eb378/package/environments/development.js#L10-L13

Under [email protected], HotModuleReplacementPlugin needs to be present. This should be added according to your configs. Can you post these files to help debug the issue?

• ./config/webpack/environment.js
• ./config/webpacker.yml

[majkelcc]

Here you go:

./config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const yaml = require('./loaders/yaml')
const CopyPlugin = require('./plugins/copy')

environment.plugins.append('CopyWebpackPlugin', CopyPlugin)

// don't use file loader for the SVGs loaded in react using svgr (images/svg/*.svg)
// we need this workaround to be able to load SVGs from the root directory (images/*.svg) in .css and .erb files
const fileLoader = environment.loaders.get('file')

fileLoader.exclude = /images\/svg\//

environment.loaders.delete('file')
environment.loaders.prepend('file', fileLoader)

environment.loaders.prepend('svg', {
  test: /images\/svg\/.*\.svg$/,
  use: [{ loader: '@svgr/webpack', options: { removeUselessDefs: false } }]
})

environment.loaders.append('coffee', coffee)
environment.loaders.append('yaml', yaml)

module.exports = environment

./config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/webpack
  source_entry_path: packs
  public_root_path: public
  public_output_path: assets/packs
  cache_path: /tmp/cache/webpacker
  check_yarn_integrity: false
  extract_css: true
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .jsx
    - .coffee
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .mjs
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: false
  extract_css: false

  # Verifies that versions and hashed value of the package contents in the project's package.json
  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    hmr: true
    inline: true
    overlay: true
    compress: false
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored:  '**/node_modules/**'
    public: # WEBPACKER_DEV_SERVER_HOST
    host: # WEBPACKER_DEV_SERVER_PUBLIC
    port: # WEBPACKER_DEV_SERVER_PORT

[jakeNiemiec]

How do you run the dev server in relation to this part of the readme?

e.g.: ./bin/webpack-dev-server --hot

Edit: Can you also tell me what your console output is as the page reloads? It should be printing info on what chunk failed and caused a full refresh. Be sure to preserve the log (Chrome):

[majkelcc]

@jakeNiemiec I'm running my app in docker containers, running ./bin/webpack-dev-server (with no flags) in a separate container, to which all those WEBPACKER_DEV_SERVER_* env variables point to.

[majkelcc]

@jakeNiemiec

Can you also tell me what your console output is as the page reloads?

I cleared my console, ensured log is preserved and made a change to a scss file. This is the console output:

[jakeNiemiec]

I am not experienced enough with docker to know if having them in separate containers would break things. It looks like the script inserted in the page can't get a response WDS. You could take a look in the network tab to see what frames are being sent over the websocket.

I know that Webpacker uses proxies & forwarding for WDS, that might help you configure docker. I can only point you to Webpacker's Docker docs at this point. I hope you can get it working.

[majkelcc]

I don't think that separate container makes any difference here - websocket connections are connecting directly to the WDS and I am still using the Rails proxy for fetching the assets. Everything was working correctly with webpacker 4.0.7.

It looks like the script inserted in the page can't get a response WDS

I'm seeing these lines at the beginning of each page load, even when HMR is working correctly.

I looked into the Network tab and this is what I see:

👆page load

👆after making a change in scss file

I thought that these type: invalid might indicate a problem, but they appear also when I checked 4.0.7, when hmr worked fine.

[majkelcc]

If you could point me to how debug this hrm, I'll be happy to dig deeper.

[jakeNiemiec]

Take a look at https://github.com/rails/webpacker/issues/2165#issuecomment-575315823

You could look at the changes he had to implement to upgrade to webpacker@4 with HMR. https://github.com/shakacode/react_on_rails/blob/c8bbb087c4760fdec86c0ccdd8f67045f93f0ce0/spec/dummy_no_webpacker/client/webpack.client.rails.build.config.js#L24

From where I am standing I can't see anything wrong with the stuff you posted. Sorry I can't be of more help.

[justin808]

@majkelcc can you give me a simple github repo that reproduces the issue?

[majkelcc]

I'll try to build a demo app next week.

[majkelcc]

@justin808 @jakeNiemiec I was able to reproduce this on a clean rails app: https://github.com/majkelcc/webpacker_issue_2427.

I updated webpacker 4.0.7 to the latest 4.2.2, but from what I remember any version > 4.0.7 had the same issue.

[majkelcc]

@jakeNiemiec good news!

I tried updating webpacker to the latest 5.0.1 and the issue was still there. You've mentioned changes in style-loader and you were right: https://github.com/webpack-contrib/style-loader/issues/422#issuecomment-554010173

When I downgraded style-loader to the last < 1.0 version (which is 0.23.1) in package.json, hmr started working again with the latest webpacker 🥳

It looks like there's something wrong in the way it works now and a new API will be introduced for Webpack 5.

Do you think this deserves a not in README?