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.