Preact App 上的 Webpack 2 HMR

Question

我正在尝试使用 Webpack 2 和 Preact 设置热模块重新加载。它正在“工作”，因为它每次重新加载都会重新加载应用程序的全部内容，但我在热重新加载之间遇到错误（我认为这就是为什么单个组件不是唯一重新加载的原因）。

这是我的 webpack 设置的相关部分：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.NamedModulesPlugin(),
    //etc.
],
entry: [
    'webpack-dev-server/client?'+DEV_SERVER,
    'webpack/hot/only-dev-server',
    './dev/jsx/index.jsx'
],
devServer: {
    hot: true,
    inline: true,
    contentBase: path.join(__dirname, '/'),
    publicPath: '/'
}

我的 index.jsx 文件如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './AppProvider.jsx';

const renderApp = () => {
  ReactDOM.render(<App/>, document.getElementById('root'));
};

renderApp();

if (module.hot) {
  module.hot.accept();
  module.hot.accept('./AppProvider.jsx', renderApp);
}

当我对任何项目文件进行更改时，应用程序内容会重新加载，并且出现以下错误：

你们中的任何人以前有过这个吗？我在谷歌上搜索了一整天，没有找到任何东西......

Answer 1

您正在渲染旧的 AppProvider 模块，该模块在 HMR 启动时为空。您需要将 AppProvider.jsx 的 require()/import 移动到您的 HMR 处理程序 as shown here。

import React from 'react';
import ReactDOM from 'react-dom';


const renderApp = () => {
  let App = require('./AppProvider.jsx');
  App = App.default || App;   // if you're using ES Modules
  ReactDOM.render(<App/>, document.getElementById('root'));
};

renderApp();

if (module.hot) {
  module.hot.accept('./AppProvider.jsx', renderApp);
}