I need to delay the root app component until my redux store autoHydrates using redux-persist. But using this code causes error in development when using Hot Reloading:
const App = () => (
<MuiThemeProvider>
<Provider store = {store}>
{getRoutes(checkAuth, history)}
</Provider>
</MuiThemeProvider>
)
class AppProvider extends Component {
constructor () {
super()
this.state = { rehydrated: false }
}
componentWillMount () {
persistStore(store, {storage: localforage}, () => {
this.setState({ rehydrated: true })
})
}
render () {
if (!this.state.rehydrated) {
return <div>Loading...</div>
}
return (
<App />
)
}
}
ReactDOM.render(
<AppProvider/>,
document.getElementById('app')
)
If I change it to just this, It works(no error at Hot reloading):
const App = () => (
<MuiThemeProvider>
<Provider store = {store}>
{getRoutes(checkAuth, history)}
</Provider>
</MuiThemeProvider>
)
ReactDOM.render(
<App/>,
document.getElementById('app')
)
I tried something using process.env.NODE_ENV to check if its 'production' or 'development' so I can run the above code snippets conditionally, however, for some reason it still causes that error if I add the stateful component snippet in the condition to only run if process.env.NODE_ENV === 'development' I get the following errors when i change something in a component that render in HomeConatiner:
warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of
HomeContainer.Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
HomeContainer.(…)
