React-hot-loader：`hot`找不到你提供的`module`的`name`答案

【问题标题】：React-hot-loader: `hot` could not find the `name` of the the `module` you have providedReact-hot-loader：`hot`找不到你提供的`module`的`name`
【发布时间】：2020-02-05 12:22:31
【问题描述】：

我正在使用 Webpack 4 创建一个带有钩子的 React 项目，我正在尝试使用 react-hot-loader 在 this tutorial 之后重新加载页面上的更改。

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

错误：React-hot-loader:hot 找不到 name 的 module你已经提供了

这是我的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);

另外，我尝试从react-hot-loader/root 导入hot，但这样我得到一个不同的错误：

错误：React-Hot-Loader: react-hot-loader/root 不支持你的系统。请改用import {hot} from "react-hot-loader"

我该如何解决这个问题？

【问题讨论】：

标签： reactjs npm webpack react-hooks

【解决方案1】：

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

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

documentation 包中提到了这一点。

【讨论】：

【解决方案2】：

好吧，看看我的 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，则会出现第二个错误。

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

【讨论】：

我试图从 webpack 配置中删除新的 webpack.HotModuleReplacementPlugin()，但错误仍然存在。
@DmitryMalugin 您是从'react-hot-loader/root' 导入还是仅从'react-hot-loader' 导入？