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?
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();