[Question/Help] module.hot doesn't seem to accept the child component changes

[aga5tya]

I have picked up the core pieces from the boilerplate, but for some reason module.accept doesn't seem to pick up the call and always reloads with this error

[HMR] Cannot apply update. Need to do a full reload!

This might be because of the way the app is structured, I have extracted the specific bits out and below are the samples

Entry is same as that in the boilerplate redux-first-router-demo/src/index.js

// components/App.js

import React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { componentsMap } from '../routeMap'
import AppWrapper  from '../components'
import NotFound  from '../components'

@connect(state => ({
        // default state is `Home`
    page: state => state.page
}))
class App extends React.Component {
    static propTypes = {
        page: PropTypes.string.isRequired
    }
    render() {
        const CoreComponent = componentsMap[this.props.page] || NotFound
        return (
                        { /*AppWrapper is a wrapper component that gives locked width and height*/}
            <AppWrapper>
                <Helmet
                    titleTemplate="%s - React.js Boilerplate"
                    defaultTitle="React.js Boilerplate"
                />
                <CoreComponent /> {/* Home component is injected here */} 
            </AppWrapper>
        )
    }
}

// routeMap.js
import Home from './components/Home'

// actions Map
export default {
    "@route/HOME": "/",
}

// components Map
export const componentsMap = { Home }

// components/Home.js
/* Changes to this component is always a full HMR reload */
import React from 'react'

const Home = () =>
    <div className="hello">
        Hello! I am the home page.!
    </div>

export default Home

[faceyspacey]

It typically has to do with the organization. For example what file the Redux provider is in. What file the React hot loader container is in.

I can't quite tell from this cuz I see no module.hot.accept. But id try re-arranging things a few different ways until it works. Also try simplifying things until it works. Isolate potential bottlenecks until it works and u will find what the HMR system doesn't like.

[aga5tya]

@faceyspacey It was indeed the case, when i moved componentsMap variable to be part of App.js the hot reload works fine, guess the connected parent has to be aware of all imports. Thank you!, closing this.