Блог

Главная - Вопросы по программированию - HMR прерывается после запуска DevTools в приложении Electron

HMR прерывается после запуска DevTools в приложении Electron

#webpack #electron

Вопрос:

Здравствуйте и извините за мой английский. Я создаю приложение с помощью Electron (Webpack TS React Redux), и у меня проблема. На сервере Webpack Dev есть система замены горячих модулей (HMR), и я использую ее, и она хорошо работает. Я меняю стили, реагирую на компоненты и перезагружаю приложение после этих изменений. Но когда я открываю Инструменты разработчика в приложении (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

После этого приложение не перезагружается, и я не вижу изменений в компонентах или стилях. Кнопка принудительной перезагрузки тоже не работает.
Но я работаю на 2 компьютерах, и проблема только на одном, на втором все хорошо работает с некоторой операционной системой, пакетами npm и конфигурацией webpack. Я пытался изменить версию узла, electron и некоторые другие, но проблема остается.
Моя конфигурация разработчика 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: [],
    },

Я понятия не имею, в чем дело.

Ответ №1:

Я решил проблему HMR, добавив

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

на рендеринге и основных файлах.ts, но принудительная перезагрузка все еще не работает.

Метки: