HMR breaks after launch DevTools in Electron App

Viewed 205

Hello and sorry for my english. I create app with Electron (Webpack + TS + React + Redux) and I have a problem. Webpack Dev Server have Hot Module Replacement system (HMR) and I use it and it works good. I change styles and React components and app reloads after this changes. But when I open Developer Tools in app (Ctrl+Shift+I or by View menu) HMR crashes. I see in console on Developer Tools:

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./src/renderer/containers/MainScreen/index.tsx is not accepted
Update propagation: ./src/renderer/containers/MainScreen/index.tsx -> ./src/renderer/containers/App/index.tsx -> ./src/renderer/renderer.tsx
    at applyHandler (http://localhost:8085/build/renderer.js:60091:31)
    at http://localhost:8085/build/renderer.js:59807:21
    at Array.map (<anonymous>)
    at internalApply (http://localhost:8085/build/renderer.js:59806:54)
    at http://localhost:8085/build/renderer.js:59781:24
    at waitForBlockingPromises (http://localhost:8085/build/renderer.js:59737:55)
    at http://localhost:8085/build/renderer.js:59779:22

After that, the application does not reload and I see no changes in components or styles. Button Force Reload does not works too. But I work on 2 computers and the problem is only on one, on the second everything works well with some operation system, npm packages and webpack config. I tried to change node version, electron and some other, but the problem remains. My Webpack dev config:

      mode: 'development',
      entry: MAIN
        ? path.resolve(`${baseWebpackConfig.externals.paths.src}/main/main.ts`)
        : path.resolve(`${baseWebpackConfig.externals.paths.src}/renderer/renderer.tsx`),
      output: {
        path: `${baseWebpackConfig.externals.paths.dist}`,
        filename: MAIN ? 'index.js' : 'renderer.js',
        publicPath: 'http://localhost:8085/build/',
      },
      target: MAIN ? 'electron-main' : 'electron-renderer',
      devtool: 'cheap-module-source-map',
      optimization: {},
      devServer: !MAIN ? {
        publicPath: 'http://localhost:8085/build/',
        port: '8085',
        host: '0.0.0.0',
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: false,
        index: 'index.html',
      } : {},
      watchOptions: {
        ignored: /node_modules/,
      },
      plugins: [],
    },

I have no idea what is wrong.

1 Answers

I solved HMR problem by adding

if (module.hot) {
    module.hot.accept();
  }

on render and main.ts files, but Force Reload still not working.

Related