CODEWITHSUNDEEP
reactjswebpackwebpack-dev-serverwebpack-module-federation
bu0603
bu0603

Reputation: 47

Webpack Module Federation react 17.0.2

I am trying to implement Module Federation Plugin in react application. Specified versions in package.json are

"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"

When the server is started in console it shows following error

Uncaught Error: Shared module is not available for eager consumption: 23
    at Object.__webpack_require__.m.<computed> (empapp-app.js:8724)
    at __webpack_require__ (empapp-app.js:7751)
    at fn (empapp-app.js:8198)
    at eval (main.js?06b3:1)
    at Object.<anonymous> (empapp-app.js:164)
    at __webpack_require__ (empapp-app.js:7751)
    at empapp-app.js:9434

and below this error one stack it prints

Uncaught (in promise) ChunkLoadError: Loading chunk 23 failed.
(error: http://localhost:9000/public/empapp-23.js)
    at Object.__webpack_require__.f.j (empapp-app.js:8878)
    at empapp-app.js:7835
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (empapp-app.js:7834)
    at Object.get (empapp-app.js:8066)
    at get (empapp-app.js:8598)
    at Function.<anonymous> (empapp-app.js:8647)
    at empapp-app.js:9437

Why it is trying to find http://localhost:9000/public/empapp-23.js. This 23 is the id of @babel/polyfill from my package.json

How to resolve this? Is the case that webpack.config.js is not reading my plugin correctly?

Following are the contents of webpack.config.js

plugins: [
    new ModuleFederationPlugin({
      name: "empapp",
      remotes: {
          dept1: "dept1@http://localhost:3000/remoteEntry.js",
      },
      shared: [
        {
          ...deps,
          react: {
              eager: true,
              singleton: true,
              requiredVersion: deps.react,
          },
          "react-dom": {
              eager: true,
              requiredVersion: deps["react-dom"],
          },
          "react-router": {  
            requiredVersion: deps["react-router"],
          },
          underscore: {
            requiredVersion: deps.underscore
          },
          "@babel/polyfill": {
            requiredVersion: deps["@babel/polyfill"]
          },
        },
      ]
    }), 
    new webpack.DefinePlugin({
      // Make sure process.env.NODE_ENV is defined so that we can strip out all of
      // the developer checks in the React code when compiling for production usage.
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }), 
    new AssetsPlugin({
      path: publicPathName
    }), 
    new webpack.LoaderOptionsPlugin({
      debug: true
    }), 
    new MiniCssExtractPlugin()
  ],

Upvotes: 1

Views: 4513

Answers (1)

Xiaofeng Xie
Xiaofeng Xie

Reputation: 185

This seems to have two separate issues:

1.For this error: Uncaught Error: Shared module is not available for eager:

Generally,You need to create a async boundary in your app. In otherwords, you need to add a file called boostrap.js and move whatever you in your current index.js into this file and then call import('bootstrap.js') in your index.js.

See example below:

https://github.com/module-federation/module-federation-examples/blob/master/different-react-versions/app1/src/index.js

  1. For the path issue, you may need to change your webpack publicPath to publicPath:"auto" or publicPath:'/' depending on your usecase.

If you still have issues, you can create a github repo and I can help take a look.

Upvotes: 1

Related Questions