CODEWITHSUNDEEP
reactjsreact-hooksmicro-frontendwebpack-module-federation
anujayk
anujayk

Reputation: 584

Module Federation | Invalid hook call. Hooks can only be called inside of the body of a function component

I am trying to consume react component remotely, which has just simple counter app (useState). And Host app which is with React and Redux.

Remote is working fine as an isolated app, but when it is consumed by host getting below error

enter image description here

react-dom.production.min.js:209 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

What i tried:

here is my webpack config

[remote]

 new ModuleFederationPlugin({
      name: 'RemoteMap',
      filename: 'Remote.js',

      exposes: {
        './Bootstrap': resolvePath(process.cwd(), 'src/common/components/organisms/remote/index.tsx')
      },
      shared: {

        "react": {
          eager: true,
          singleton: true,
          strictVersion: true,
          requiredVersion: dependencies.react
        },
        "react-redux": {
          eager: true,
          singleton: true
        },
        'react-dom': {
          eager: true,
          singleton: true
        }
      }
    })

[Host]

 new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        // remote: ,
        myApp: 'RemoteMap@http://localhost:8081/Remote.js'
      }
    }),

What could be the possible reasons and fix for above error. ?

Upvotes: 2

Views: 3433

Answers (3)

bFunc
bFunc

Reputation: 1465

For me, all federation examples, even sandbox in official WebPack docs are failing with this error when hook is added (Jan 2025).

Solved for my case by looking on federation setup from this example: https://github.com/module-federation/module-federation-examples/tree/master/react-nextjs/nextjs-host-react-remote (it doesn't work either, throws another "export not found" error).

This code was missing in host config:

shared: {
    react: {
      // Notice shared are NOT eager here.
      requiredVersion: false,
      singleton: true,
    },
  }

Upvotes: 0

Duc Trung Mai
Duc Trung Mai

Reputation: 2598

for latest react we should share same react-dom/client

// host

new container.ModuleFederationPlugin({
  shared: {
    react: {
      eager: true,
      singleton: true,
      requiredVersion: deps.react,
    },
    'react-dom/client': {
      eager: true,
      singleton: true,
      requiredVersion: deps['react-dom'],
    },
  },
}),

// remote

new ModuleFederationPlugin({
  name: "react_mfe_app",
  exposes: {
    ReactAppLoader: "./src/loader.ts",
  },
  shared: {
    react: {
      singleton: true,
    },
    "react-dom/client": {
      singleton: true,
    },
  },
  filename: "remoteEntry.js",
}),

for remote if I change react-dom/client to react-dom it will throw the error

Upvotes: 1

Leonardo Lima
Leonardo Lima

Reputation: 496

I had the same problem configuring the host with React. To resolve I added the dependencies as shared:

const packageJson = require('./package.json');

...

new ModuleFederationPlugin({
    name: "App",
    remotes: {
      HomeApp: "HomeApp@http://localhost:9002/remoteEntry.js",
      ContactApp: "ContactApp@http://localhost:9003/remoteEntry.js",
      //HomeApp: lazyLoadRemote("http://localhost:9002/remoteEntry.js","HomeApp"),
      //ContactApp: lazyLoadRemote("http://localhost:9003/remoteEntry.js","ContactApp"),
    },
    shared: {...packageJson.devDependencies}
  }),

Upvotes: 1

Related Questions