[Meta] Webpack 5 Module Federation - Errors

[ckken]

(node:50522) UnhandledPromiseRejectionWarning: Error: Cannot find module 'webpack/lib/ParserHelpers'
Require stack:

• /Users/ken/Desktop/develop/MicroFE/emp-workspace/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js
• /Users/ken/Desktop/develop/MicroFE/emp-workspace/packages/emp-cli/webpack/config/plugin.js
• /Users/ken/Desktop/develop/MicroFE/emp-workspace/packages/emp-cli/webpack/config/common.js
• /Users/ken/Desktop/develop/MicroFE/emp-workspace/packages/emp-cli/helpers/project.js
• /Users/ken/Desktop/develop/MicroFE/emp-workspace/packages/emp-cli/scripts/dev.js
• /Users/ken/Desktop/develop/MicroFE/emp-workspace/packages/emp-cli/bin/emp.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
  at Function.Module._load (internal/modules/cjs/loader.js:687:27)
  at Module.require (internal/modules/cjs/loader.js:849:19)
  at require (internal/modules/cjs/helpers.js:74:18)
  at Object. (/Users/ken/Desktop/develop/MicroFE/emp-workspace/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js:6:23)
  at Module._compile (internal/modules/cjs/loader.js:956:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
  at Module.load (internal/modules/cjs/loader.js:812:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Module.require (internal/modules/cjs/loader.js:849:19)
  (node:50522) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
  (node:50522) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[pmmmwh]

Hi, can you please state the version of:

1. the plugin;
2. Webpack;

Providing me just the error stack trace is not helpful to say the least, because there is not much stuff for me to trace.

[ckken]

webpack: 5 beta 18
plugin version:
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.0-beta.5",
"react-refresh": "^0.8.3",

[ckken]

update =>"@pmmmwh/react-refresh-webpack-plugin": "^0.4.0-beta.6"
use module federation

[pmmmwh]

Did you include the webpack.HotModuleReplacementPlugin in your Webpack configuration? If not, this plugin won't work.

With webpack-dev-server you can use either of the hot/hotOnly options, and with other development means you'll have to include it manually.

I've tested with module federation (with Webpack master, cause there' some bugs with module cache in beta.18) and everything works fine.

[ckken]

Did you include the webpack.HotModuleReplacementPlugin in your Webpack configuration? If not, this plugin won't work.

With webpack-dev-server you can use either of the hot/hotOnly options, and with other development means you'll have to include it manually.

I've tested with module federation (with Webpack master, cause there' some bugs with module cache in beta.18) and everything works fine.

nice

[ckken]

[ckken]

no work for me！

devServer
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8000,
    disableHostCheck: true,
    historyApiFallback: true,
    hot: true,
    stats: {
      colors: true,
    },
  },
}
// module
        scripts: {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            babel: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
                plugins: [
                  //
                  ['import', {libraryName: 'antd', style: true}],
                  isDev && require.resolve('react-refresh/babel'),
                  //
                ],
              },
            },
          },
        },
// plugin 
  if (isDev) {
    conf.plugin.reacthotloader = {
      plugin: ReactRefreshWebpackPlugin,
      args: [{}],
    }
  }

[ckken]

when remove exposes it work!

[ckken]

[pmmmwh]

when remove exposes it work!

The issues you're facing is due to a bug in webpack@5.0.0-beta.18. if you use webpack master, these issues goes away. If they don't, or if you have any further questions, it is most likely not due to this plugin - we plug into Webpack's HMR runtime and if the HMR runtime errors out for module federation we can do nothing.

Side note: I would suggest adding react-refresh/runtime to shared singleton - you can also pin the version.

[ckken]

no work also!