react-hot-loader with React.lazy not working

[hasayake97]

Description

react-hot-loader with React.lazy not working
Lazy loading component changes page cannot respond to changes

Expected behavior

When the lazy loading component changes, the page should respond to the change

Actual behavior

You need to refresh the page manually to see the new changes

Environment

React Hot Loader version: 4.12.20

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

1. node -v: v12.16.1
2. npm -v: 6.13.4

Then, specify:

1. Operating system: win10 x64
2. Browser and version: Google chrome 81

Reproducible Demo

index.js

import React from 'react'
import ReactDom from 'react-dom'

import App from './views/App'

ReactDom.render(<App />, document.getElementById('root'))

app.js

import React, { Suspense, lazy } from 'react'

import { hot } from 'react-hot-loader/root'
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom'

const Home = lazy(() => import('@/views/Home/index'))
const Index = lazy(() => import('@/views/Index/index'))

class App extends React.Component {
  render() {
    return (
      <div>
        <div className="text">ceshi</div>
        <Router>
          <Link to="/index">index</Link>
          <Suspense fallback={<div>Loading</div>}>
            <Switch>
              <Route path="/" exact component={Home}></Route>
              <Route path="/index" exact component={Index}></Route>
              <Route component={Index}></Route>
            </Switch>
          </Suspense>

        </Router>
      </div>
    )
  }
}


export default hot(App)

webpack.config.js

devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    hot: true,
    host: '127.0.0.1',
    port: 8000,
    open: true,
    quiet: true,
    compress: true
  },

rules: [
 {
     test: /\.m?jsx?$/,
     exclude: /(node_modules|bower_components)/,
     use: [
            {
              loader: 'babel-loader'
            }
        ]
    }
]

plugins: [
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You applicaton is running here http://127.0.0.1:8000']
      }
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]

[theKashey]

Yep, there are some reported problems around it:

• It doesn't work with React.lazy #1425

[hasayake97]

是的，周围有一些报告的问题：

• ＃1425

you can use my project and reappear it : https://github.com/Blanceluo/webpacks
thanks you!

Yep, there are some reported problems around it:

• It doesn't work with React.lazy #1425

[hasayake97]

Yep, there are some reported problems around it:

• It doesn't work with React.lazy #1425

According to *#1425 it has been solved.
This plugin is not introduced, babel-plugin-dynamic-import-node
And also need to set trackTailUpdates to false, not needed in the example, why?

[xyy94813]

@Blanceluo
How did you solve the problem????
Can you show an example?
I run the #1425 example with error in browser.

My core stack:

• CRA, ps: react-scripts v3.0.1.
• reate-app-rewired
• react-app-rewire-hot-loader

I add babel-plugin-dynamic-import-node and set trackTailUpdates to false too.
And use @hot-loader/react-dom

const _rewireReactHotLoader = (config, env) => {
  if (env === 'development') {
    config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
    // babel-preset-react-app use it in dev
    // hot-loader need babel-plugin-dynamic-import-node
    removeInternalBabelPlugin('@babel/plugin-syntax-dynamic-import')(
      config,
      env
    );
    addBabelPlugin(
      'dynamic-import-node' // hot loader need it
    )(config, env);
  }

  return rewireReactHotLoader(config, env);
};

But hot loader is still not work with code splitting.

react-scripts use babel-preset-react-app.
And it use '@babel/plugin-syntax-dynamic-import' in dev env.
and use babel-plugin-dynamic-import-node in test env.

Should i rm the babel plugin '@babel/plugin-syntax-dynamic-import' ?

[hasayake97]

@Blanceluo
您是如何解决问题的？？？？
你能举个例子吗？
我运行＃1425示例，但浏览器中出现错误。

我的核心堆栈：

• CRA，ps：react-scripts v3.0.1。
• reate-app-wired
• react-app-rewire-hot-loader

我添加babel-plugin-dynamic-import-node并设置trackTailUpdates为false。
并使用@hot-loader/react-dom

const  _rewireReactHotLoader  =（config，env）=> {
   如果（env ===  ' development '）{
     config。解决。别名 [ ' react-dom ' ] =  ' @ hot-loader / react-dom ' ;
    // babel-preset-react-app在开发人员中使用它
    //热加载器需要babel-plugin-dynamic-import-node 
    removeInternalBabelPlugin（' @ babel / plugin-syntax-dynamic-import '）（
      配置
      环保
    ）;
    addBabelPlugin（
       ' dynamic-import-node '  //热加载器需要它
    ）（配置，环境）;
  }

  返回 rewireReactHotLoader（config，env）;
};

但是热加载器仍然不能与代码拆分一起使用。

react-scripts使用babel-preset-react-app。
它在开发环境中使用了“ @ babel / plugin-syntax-dynamic-import”。
并用于babel-plugin-dynamic-import-node测试环境

我应该使用babel插件'@ babel / plugin-syntax-dynamic-import'吗？

You may also need to introduce react-hot-loader， @hot-loader/react-dom just to support hooks...

[hasayake97]

problem solved