react-hot-loader: It doesn't work with React.lazy

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

What you are reporting: when I user React.lazy, it doesn’t work

Expected behavior

What you think should happen: state can remain

Actual behavior

What actually happens: state can’t remain

Environment

React Hot Loader version: 4.12.19 “devDependencies”: { “@babel/core”: “^7.8.3”, “@babel/plugin-proposal-class-properties”: “^7.8.3”, “@babel/plugin-proposal-decorators”: “^7.8.3”, “@babel/plugin-transform-runtime”: “^7.8.3”, “@babel/preset-env”: “^7.8.3”, “@babel/preset-react”: “^7.8.3”, “babel-loader”: “^8.0.6”, “express”: “^4.17.1”, “html-webpack-plugin”: “^3.2.0”, “webpack”: “^4.41.5”, “webpack-cli”: “^3.3.10”, “webpack-dev-middleware”: “^3.7.2”, “webpack-dev-server”: “^3.10.3”, “webpack-hot-middleware”: “^2.25.0” }, “dependencies”: { “@babel/runtime-corejs3”: “^7.8.3”, “connected-react-router”: “^6.7.0”, “history”: “^4.10.1”, “prop-types”: “^15.7.2”, “react”: “^16.12.0”, “react-dom”: “^16.12.0”, “react-hot-loader”: “^4.12.19”, “react-redux”: “^7.1.3”, “react-router-dom”: “^5.1.2”, “redux”: “^4.0.5”, “redux-thunk”: “^2.3.0” }

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

node -v: v12.15.0
npm -v: 6.13.4

Then, specify:

Operating system: mac os
Browser and version: chrome

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

you can use my project and reappear it : https://github.com/rainydayDY/webpack-fe

About this issue

Original URL
State: open
Created 4 years ago
Comments: 15

Commits related to this issue

fix: add React 17 support for lazy, related to #1425 — committed to gaearon/react-hot-loader by theKashey 4 years ago
feat: support React 17 (#1557) * feat: support React 17 * add react 17 tests * fix: use enzyme 16 adapter for React 17 * fix: add React 17 support for lazy, related to #1425 * ci uses abs... — committed to gaearon/react-hot-loader by theKashey 4 years ago

Most upvoted comments

I am using react-refresh with react-refresh-webpack-plugin. It work well with lazy-component.

This plugin has been integrated into CRA. It looks like it will be released with CRA V4.

react-hot-loader will be deprecated… #1453

How did you solve this issue, I’m using cra4.0 (react17.0.1) with react-refresh and we pack plug-in, it still could not be able to handle hot reload with react.lazy component.

monochrome-yeh on Oct 27, 2020

I have also encountered the same problem，How can I solve it, for example?

https://github.com/X-neuron/antdFront.git this is good example for hot reload in code split condition

I can’t believe the official configuration caused the error, but it exist…

linshuizhaoying on Jul 5, 2020

I have also encountered the same problem，How can I solve it, for example?

https://github.com/X-neuron/antdFront.git this is good example for hot reload in code split condition

X-neuron on May 19, 2020

webpack.dev.config.js:

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      "@": path.resolve(__dirname, 'src'),
      // 'react-dom': '@hot-loader/react-dom',  //delete this line
    }
  },
{
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              // See #6846 for context on why cacheCompression is disabled
              cacheCompression: false,
              presets: ['@babel/preset-env'],
              plugins: [
                'lodash',
                // 'react-hot-loader/babel',  // delete this line
                // '@babel/plugin-proposal-object-rest-spread',
              ]
            },
          },

in app.jsx : just use export default hot(App); it will work fine in code spliting condition

X-neuron on May 19, 2020