HMR and build stopped working with Webpack 5

[Naspo88]

It's more than 2 months now (since when I had to migrate to WebPack5) that HMR stopped working completely (styleguidist start) (and no solution seems to work to fix it) and I can't build (styleguidist build) at all the documentation for message.split error (see image later).

This is my Webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          getCustomTransformers: () => {
            return {
              before: [TypescriptPlugingForStyledComponent()],
            };
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        exclude: [
          /node_modules/,
          path.resolve(__dirname, '../src/components/atoms/Icons/Results'),
          path.resolve(__dirname, '../src/components/atoms/TrevorLoading'),
        ],
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
      {
        test: /\.jpe?g$|\.png$|\.svg$/,
        include: [path.resolve(__dirname, '../src/components/atoms/Icons/Results')],
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/sd/[name].[ext]?[hash]',
          },
        },
      },
      {
        test: /\.(gif)$/i,
        include: [path.resolve(__dirname, '../src/components/atoms/TrevorLoading')],
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]',
          },
        },
      },
      {
        test: /\.(woff|woff2)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.png', '.gif', '.svg', '.d.ts', '.woff', '.woff2'],
    modules: [path.join(__dirname, '../src'), 'node_modules'],
    plugins: [
      new TsConfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ],
  devServer: {
    allowedHosts: ['host.docker.internal'],
  },
};

Is there a working solution that I missed to fix these 2 bugs?

Or what is the ETA to fix this as the team I work with is slowed down a lot by both of these errors?

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-styleguidist": "^11.1.7",
"webpack": "^5.47.0",
"webpack-cli": "4.7.2",

I think this issue is similar to: #1822

[DavidHenri008]

The message split error is due to react-styleguidist that has a dependency on webpack v4 and react-dev-utils v11. Webpack v5 needs the new react-dev-utils v12 (12.0.0-next.47) to manage the message type properly.
A workaround is to force the package resolution by adding the following in your package.json file.

  "resolutions": {
    "react-dev-utils": "12.0.0-next.47"
  },

[github-actions]

🎉 This issue has been resolved in version 11.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀