Question: Can HMR work without the dev server?

[woss]

Hi,

I'm building the chrome extension with svelte and webpack. Due to this i cannot use the webpack dev server where the HMR is working. The way how i need to work is the webpack --watch where HMR doesn't work.

The webpack does generate the hot-update files but they never get to the extension.

Here is the sample from the generated js file

if (module && module.hot) { if (false) {}; App = common_temp_node_modules_pnpm_svelte_loader_3_1_4_svelte_3_53_1_node_modules_svelte_loader_lib_hot_api_js__WEBPACK_IMPORTED_MODULE_11__.applyHmr({ m: module, id: "\"src/App.svelte\"", hotOptions: {"preserveLocalState":false,"noPreserveStateKey":["@hmr:reset","@!hmr"],"preserveAllLocalStateKey":"@hmr:keep-all","preserveLocalStateKey":"@hmr:keep","noReload":false,"optimistic":false,"acceptNamedExports":true,"acceptAccessors":true,"injectCss":false,"cssEjectDelay":100,"native":false,"importAdapterName":"___SVELTE_HMR_HOT_API_PROXY_ADAPTER","noOverlay":false,"allowLiveBinding":false}, Component: App, ProxyAdapter: common_temp_node_modules_pnpm_svelte_hmr_0_14_12_svelte_3_53_1_node_modules_svelte_hmr_runtime_proxy_adapter_dom_js__WEBPACK_IMPORTED_MODULE_12__.adapter, acceptable: true, preserveLocalState: false, emitCss: false, }); }
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);

And the webpack configs rules look like this

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        EXTENSION_PREFIX: JSON.stringify(process.env.EXTENSION_PREFIX || EXT_NAME),
        NODE_ENV: JSON.stringify('production'),
        PORT_PREFIX: EXT_NAME,
        EXTENSION_VERSION: manifest.version
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
...
],
module: {
  rules: {
      ...,
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            compilerOptions: {
              dev: !isProduction,
              enableSourcemap: true
            },
            emitCss: isProduction,
            preprocess: svelteConfig.preprocess,
            hotReload: !isProduction,
            hotOptions: {
              // Prevent preserving local component state
              preserveLocalState: false,

              // If this string appears anywhere in your component's code, then local
              // state won't be preserved, even when noPreserveState is false
              noPreserveStateKey: '@!hmr',

              // Prevent doing a full reload on next HMR update after fatal error
              noReload: false,

              // Try to recover after runtime errors in component init
              optimistic: true,

              // --- Advanced ---

              // Prevent adding an HMR accept handler to components with
              // accessors option to true, or to components with named exports
              // (from <script context="module">). This have the effect of
              // recreating the consumer of those components, instead of the
              // component themselves, on HMR updates. This might be needed to
              // reflect changes to accessors / named exports in the parents,
              // depending on how you use them.
              acceptAccessors: true,
              acceptNamedExports: true
            }
          }
        }
      },
   }
}

Any help is appreciated.