react-hot-loader-v3-fix.MD

react-hot-loader-v3-fix.MD

react-hot-loader v3 이상 부터는 다음과 같이 코드를 업데이트 해야 합니다:

webpack.config.js

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

src/index.js

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'; 이걸 더 넣어줘야하네요.

client state replace 문제가 해결이 안되네요

저는 이렇게 해서 됐어요~ "react-hot-loader": "^3.1.3",

webpack.config.js 의 module 만. 나머지는 .babelrc 입니다.
module: {
loaders: [
{
test: /.js$/,
use: ['react-hot-loader/webpack', 'babel-loader'],
exclude: /node_modules/
}
]
},

.babelrc
{
"presets":["es2015", "react"],
"plugins": ["react-hot-loader/babel"]
}

이렇게 해서 됐습니다.

@ahacross 감사합니다! 에러 해결했어요! ㅎㅎ