webpack: Uncaught TypeError: Cannot read property 'hot' of undefined

I have hot loading setup and partially working with React Hot Loader 3.

Reloading components works fine. However, whenever I reload a Redux reducer or action I am receiving the following error:

Uncaught TypeError: Cannot read property 'hot' of undefined

  getAffectedStuff @ client.js:351
  hotApply @ client.js:386
  (anonymous function) @ only-dev-server.js:32
  hotUpdateDownloaded @ client.js:312
  hotAddUpdateChunk @ client.js:284
  webpackHotUpdateCallback @ client.js:5
  (anonymous function) @ 0.4221176….hot-update.js:1

Relevant parts of code here:

configureStore({ url }).then( store => {
  render(
    <AppContainer component={ Root } props={{ store }} />,
    document.querySelector( '.app' )
  );

  if ( __DEVELOPMENT__ && module.hot ) {
    module.hot.accept([ './common/components/Root', './common/store/configureStore' ], () => {
      render(
        <AppContainer
          component={ require( './common/components/Root' ).default }
          props={{ store }}
        />,
        document.querySelector( '.app' )
      );
    });
  }
}).catch( console.error.bind( console ));

And here:

if ( __DEVELOPMENT__ && module.hot ) {
  module.hot.accept( '../reducers', () => {
    store.replaceReducer( require( '../reducers' ).default );
  });
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 19 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I’m seeing this issue on webpack 2, as well

I am encountering the same sporadically when hot reloading my server.

I think this may be the culprit: https://github.com/webpack/webpack/blob/028c51301733836abbedc88be7483af2623f5943/lib/HotModuleReplacement.runtime.js#L502

in all the other places module is guarded against being undefined but here apparently not?

error is:

[HMR] Update failed: TypeError: Cannot read property 'hot' of undefined
    at hotApply (/.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:520:1)
    at hotUpdateDownloaded (/.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:245:1)
    at hotAddUpdateChunk (/.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:225:1)
    at hotDownloadUpdateChunk (/.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:3:1)
    at hotEnsureUpdateChunk (/.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:235:1)
    at /.../build/server/webpack:/webpack/bootstrap 7bade06584d268e6755d:206:1

(…/build/server is the outputDir)

I’m getting this running the webpack dev server using the nodejs api. weird

I am happy to report that so far I have not experienced this problem any more, Webpack is being super stable 😄

On Sat, Aug 19, 2017 at 6:15 PM Stijn de Witt notifications@github.com wrote:

Thanks @Kamilius https://github.com/kamilius and @sokra https://github.com/sokra for getting this fixed! Great work!!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/webpack/webpack/issues/2387#issuecomment-323532391, or mute the thread https://github.com/notifications/unsubscribe-auth/AADWljYBRF4x9vPo4xtu3IS9QRqbdSfOks5sZwoUgaJpZM4IOfEg .

Having exactly same issue on Webpack 2, which kills my SCSS hot module replacement. Happens each time I’m trying to apply new SCSS changes.

Update:

Spiked (fixed) issue by wrapping // call accept handlers code (L497 - L532) into try/catch block in file ./node_modules/webpack/lib/HotModuleReplacement.runtime.js