Search code examples
reactjswebpackreduxecmascript-2016hot-module-replacement

Webpack react HMR without router


I need to start react js project without react-router, but I cannot setup hot module replacement without that one, please can you help me.
My server

const app = express()

// Apply gzip compression
app.use(compress())

if (project.env === 'development') {
  const compiler = webpack(webpackConfig)

   debug('Enabling webpack dev and HMR middleware')
   app.use(require('webpack-dev-middleware')(compiler, {
   publicPath  : webpackConfig.output.publicPath,
   contentBase : project.paths.client(),
   hot         : true,
   quiet       : project.compiler_quiet,
   noInfo      : project.compiler_quiet,
   lazy        : false,
   stats       : project.compiler_stats
 }))
 app.use(require('webpack-hot-middleware')(compiler, {
   path: '/__webpack_hmr'
 }))
} else {
    ....
}

My application entry point.

const MOUNT_NODE = document.getElementById('root')

let render = () => {
   ReactDOM.render(
    <App store={store} />,
    MOUNT_NODE)
 }

 if (__DEV__) {
    if (module.hot) {
      // Development render functions
      const renderApp = render
      const renderError = (error) => {
      const RedBox = require('redbox-react').default

      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
    }

    // Wrap render in try/catch
   render = () => {
      try {
         renderApp()
      } catch (error) {
         console.error(error)
         renderError(error)
      }
   }

  // Setup hot module replacement
   module.hot.accept('./App', () =>
     setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
        render()
     })
   )
 }

}

Where ./App is simple component wrapping my application inside provider.

shouldComponentUpdate = () => false;

 render () {
    return (
    <Provider store={this.props.store}>
       <RootComponent />
    </Provider>  )
 }

And the main problem is - that when I save this, or child file, HMR rebuilding and nothing changed, but even, I use router, and pass as entry point of application, instead of simple component - its working fine.

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : { onEnter: (nextState, replace) => replace('/songs') },
  childRoutes : [
    ...
 ]
 })

What I am doing wrong?


Solution

  • Sorry, it was really easy, if you wont so, change

     module.hot.accept('./App', () =>
        setImmediate(() => {
           ReactDOM.unmountComponentAtNode(MOUNT_NODE)
           render()
        })
     )
    

    To simply

     module.hot.accept();