Solid-refresh with Webpack HMR errors

Hello, I'm trying to integrate solid-refresh in a webpack based solid-js app to make development a bit easier. The app is a microfrontend and we used module federation in the company I work on, so I can't just use other bundlers. Unfortunately, I haven't found any templates or projects with this setup.

The following are some pieces from the webpack config I think might be relevant to figure the issue out.

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

The application starts and works normally, however, webpack displays a warning and error when I make a change. Browser logs:

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

I appreciate any help, please let me know if any additional data is needed.

SolidJS•3y ago•

1 reply

pedro00dk

Solid-refresh with Webpack HMR errors

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

The application starts and works normally, however, webpack displays a warning and error when I make a change. Browser logs:

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

I appreciate any help, please let me know if any additional data is needed.

Solid-refresh with Webpack HMR errors

Solid-refresh with Webpack HMR errors

Similar Threads

Similar Threads

Similar Threads