Ignored an update to unaccepted module - Webpack 4

caleniuc commented 5 years ago

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

Upgraded Webpack from V2 and react-transform-hmr to Webpack V4 with react-hot-loader, but I'm getting:

Ignored an update to unaccepted module [HMR] The following modules couldn't be hot updated: (Full reload needed)

Expected behavior

I'm expecting that JS files do hot reload and not require a full reload. Maybe this is an issue with my configuration, but I've tried everything so far and can't find an actual answer. Hot reload works on SCSS files, but not on JS files.

Actual behavior

Ignored an update to unaccepted module [HMR] The following modules couldn't be hot updated: (Full reload needed)

Environment

React Hot Loader version: 4.12.0

Run these commands in the project folder and fill in their results:

node -v: v8.10.0
npm -v: v5.6.0

Then, specify:

Operating system: Windows 10
Browser and version: Chrome 75.0.3770.100

webpack.config.js

Entry:

webpackConfig.entry = {
  app: __DEV__ ?
    ['react-hot-loader/patch', APP_ENTRY_PATH, `webpack-hot-middleware/client?path=${config.compiler.publicPath}__webpack_hmr`] :
    [APP_ENTRY_PATH],
};

JS files loader:

webpackConfig.module.rules = [{
  test: /\.(js|jsx)$/,
  exclude: [/(node_modules)/, /lib/],
  use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
    }
  }]
}];

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "plugins": [
    "react-hot-loader/babel",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ],
        "@babel/preset-react",
        "@babel/preset-flow"
      ],
      "plugins": [
        "@babel/plugin-transform-modules-commonjs",
        "transform-amd-to-commonjs",
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ],
        "dynamic-import-node"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-constant-elements"
      ]
    }
  }
}

Root component exported

export default hot(Root);

theKashey commented 5 years ago

That's not related to react-hot-loader, as long as that purely webpack related problem. But anyway:

webpack-hot-middleware should be first, but better remove it
there is no HotModuleReplacementPlugin, but better don't use it

What shall you do?

NODE_ENV=development webpack-dev-server --hot, and THAT'S ALL.

Bonus: The real problem is displayed next to

[HMR] The following modules couldn't be hot updated: (Full reload needed)

Which file and WHY it could not be updated - that's, that's something you should think about. For example you might have two webpack-hot-middlewares.

caleniuc commented 5 years ago

If i remove webpack-hot-middleware then changes are no more detected in the browser, also if I put it in the first position in entry the issue persists.

I do have the HotModuleReplacementPlugin, but forgot to insert it in the config here.

We use express + webpack-dev-middleware.

For every .js file this happens, if I modify Tile.js then the message appears in console for this file that I've modified.

I'll try to search more into the documentation of webpack and maybe open an issue there.

Thank you for your answer! :)

theKashey commented 5 years ago

express + webpack-dev-middleware is a very fragile combination, it's easy to get it right, but also easy to break everything. I would try to create an example, as long as right now there is no example, and this is a popular issue. If you will find the answer before me - feel free to post it here.

sibelius commented 4 years ago

what is the proper way to setup hot reload in webpack?

theKashey commented 4 years ago

That's a complex theoretical problem, but there are 2 rules:

try to reload things as a whole(domains), not as small pieces. This will guarantee that it still works as a whole. Right now (in terms of RHL) that "whole" is a "whole application", which is already too big, and it's easy to mess in another way.
if you want to reload a module - probably you need to setup it at the parent level (this is what /root helper does for you)

songz commented 3 years ago

I too, was using express + webpack-dev-middleware and was getting The following modules couldn't be hot updated.

This blog post worked out for me: https://medium.com/@larrybotha/great-article-4d0eb79a61a6#_=_

Solution (Add to client side entry file):

if (module && module.hot && module.hot.accept) {
  module.hot.accept()
}

theKashey commented 3 years ago

@songz - this is something you should not do. Proper setup for hot-loader (import { hot } from 'react-hot-loader/root';....) will configure HMR by itself - https://github.com/gaearon/react-hot-loader/blob/6032f4255e0268bb794c1e9b8ae5b436400ffbb5/src/hot.dev.js#L102

If you doing more than you should, or not doing what README has told you.

tomtom94 commented 2 years ago

Have a look at this repo https://github.com/tomtom94/react-easy-ssr

Using SSR split code only allows you to use import { hot } from 'react-hot-loader/root' everwhere in your component.

Using the other solution patch as entry point won't work, because of split code.

module.exports = {
  entry: ['react-hot-loader/patch', './src'],
  // ...
};

gaearon / react-hot-loader