Webpack 2 HMR on Preact App

Question

Webpack とPreactでホットモジュールリロードをセットアップしようとしています。リロードするたびにアプリケーションの内容全体がリロードされているという点では「動作しています」が、ホットリロードの間にエラーが発生しています（個々のコンポーネントだけがリロードされるわけではありません）。

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); 
} 

、

は、ここに私のWebPACKのセットアップの関連部分ですアプリのコンテンツがリロードされ、次のエラーが表示されます。

この前に？私は一日中グーグルで行っていて何も見つけていませんでした...

Answer 1

HMproが起動するときに古いAppProviderモジュールをレンダリングしています。あなたはrequire（）/ importをAppProvider.jsxを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); 
}