Getting webpack hot updating to work correctly in my isomorphic web app

守給你的承諾、 提交于 2019-12-03 14:30:57

After a lot of digging around, I found the answer to my problem. I was creating my base React "class" like this:

class Application = () => {
  return (
    <div id="maincontent">
      <MainMenu />
      <ScreenContents />          
    </div>
  )
};

This is unsupported for HMR, even if it's supported by React.

I had to create my class explicitly like this:

class Application extends React.Component{
  render (){
    return (
      <div id="maincontent">
        <MainMenu />
        <ScreenContents /> 
      </div>
    );
  }
};

And then HMR works just fine :)

Edit: According to @akoskm comments, it seems that the babel configuration in the webpack configuration file might be an issue as well. So here are the relevant parts:

The babel settings

var babelSettings = {
    presets: ['react', 'es2015', 'stage-2'],
    env: {
        development: {
            plugins: [
                ['react-transform', {
                    transforms: [
                        { 
                            transform: 'react-transform-hmr',
                            imports: [ 'react' ],
                            locals: [ 'module' ]
                        }
                    ]
                }]
            ]
        }
    }
};

The presets and environment stuff might not be exactly the same for you, but the react-transform stuff is the important part here.

The loader

{ 
    test: /\.(js|jsx)$/,
    loaders: ['babel?' + JSON.stringify(babelSettings)],
    exclude: /node_modules/
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!