react-hot-loader v3 이상 부터는 다음과 같이 코드를 업데이트 해야 합니다:
var webpack = require('webpack');
module.exports = {
entry: ['react-hot-loader/patch', './src/index.js'] ,
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname + '/public/',
},
module:{
loaders: [
{
test: /.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ["react-hot-loader/babel"]
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './components/App'
ReactDOM.render(
<AppContainer>
<App/>
</AppContainer>,
document.getElementById('root')
);
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./components/App', () => {
const NextApp = require('./components/App').default;
ReactDOM.render(
<AppContainer>
<NextApp/>
</AppContainer>
,
document.getElementById('root')
);
});
}
bundle.js:29906 React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.
이런 에러가 발생하기 때문에..
index.js 첫줄에 import 'react-hot-loader/patch'; 이걸 더 넣어줘야하네요.