在电子应用程序中启动DevTools后，HMR中断

Question

你好，对不起，我的英语。我用Electron (Webpack + TS + React + Redux)创建应用程序，我有一个问题。Webpack开发的服务器有热模块更换系统(HMR)，我使用它，它工作得很好。我更改了样式，并在此更改后重新加载React组件和应用程序。但当我在应用程序中打开开发人员工具(Ctrl+Shift+I或查看菜单)时，HMR崩溃了。我在开发人员工具的控制台中看到：

[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

在此之后，应用程序不会重新加载，我也看不到组件或样式有任何变化。按钮强制重新加载也不起作用。但是我在两台电脑上工作，问题只出现在一台电脑上，在第二台电脑上，所有的东西都在一些操作系统，npm包和webpack的配置下运行得很好。我试图改变节点版本，电子和其他一些，但问题仍然存在。我的Webpack开发配置：

      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: [],
    },

我不知道哪里出了问题。

Answer 1

我解决了HMR问题，通过添加

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

在渲染和main.ts文件上，但强制重新加载仍然不起作用。