在 Electron App 中启动 DevTools 后 HMR 中断答案

【问题标题】：HMR breaks after launch DevTools in Electron App在 Electron App 中启动 DevTools 后 HMR 中断
【发布时间】：2021-10-11 10:44:55
【问题描述】：

你好，对不起我的英语。我使用 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: [],
    },

我不知道出了什么问题。

【问题讨论】：

标签： webpack electron

【解决方案1】：

我通过添加解决了 HMR 问题

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

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

【讨论】：