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

의

여기 내 웹팩 설정의 관련 부분입니다 앱 콘텐츠가 다시로드되고 다음 오류가 발생합니다.

이거 전에? 나는 하루 종일 인터넷 검색을했는데 아무 것도 찾지 못했습니다 ...

Answer 1

HMR이 시작될 때 null 인 이전 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); 
}