反应热加载器:"热"找不到您提供的"模块"的"名称"

Question

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

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

错误：反应热加载程序：hotname找不到 您提供的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/root不支持 您的系统。请改用import {hot} from "react-hot-loader"

我该如何解决这个问题？

Answer 1

在做出反应之前，您应该需要它：

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

包文档提到了这一点。

Answer 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()，解决了我的问题。

Answer 3

从 'react-hot-loader' 导入 { hot }; 导出默认热(模块((应用程序(;

或

从"反应-热加载器/根"导入 { 热 }; 导出默认热(应用程序(;