反应-热装载机：“热”找不到您提供的“模块”的“名称”

Question

我使用Webpack 4创建了一个带有钩子的React，并且我正在尝试使用react-hot-loader在本教程之后重新加载页面上的更改。

但是，当我尝试npm start时，我会在浏览器上得到以下错误：

错误:React-热加载程序：hot找不到您提供的module的name。

这是我的App.js内容：

import React from 'react';
import { hot } from 'react-hot-loader';
import Header from './Header';

function App() {

  return (
    <section className="main">
      <Header />
    </section>
  );
}
export default hot(App);

或者，我尝试从hot中导入react-hot-loader/root，但是这样我得到了一个不同的错误：

错误:React:系统不支持react-hot-loader/root .请改用import {hot} from "react-hot-loader"

我怎样才能解决这个问题？

Answer 1

嗯，看我webpack的吐露：

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV) }),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
  },

我在插件中使用了webpack.HotModuleReplacementPlugin()，在devServer中使用了hot: true，如果使用react-hot-loader/root，这将导致第二个错误。

因此，将new webpack.HotModuleReplacementPlugin()从webpack.config.js中删除，解决了我的问题。

Answer 2

你应该在做出反应之前要求它：

import { hot } from 'react-hot-loader/root';
import React from 'react';

包文档提到了这一点。

Answer 3

从“react热加载程序”导入{ hot }；导出默认的hot(模块)(应用程序)；

或

从“react热加载程序/根”导入{ hot }；导出默认热(应用程序)；