Getting react hooks error in the host application - Cannot read properties of null (reading useEffect)

[a-utkarsh]

Describe the bug

Getting the hooks error when tries to load a remote component running on the latest version of React, Next and nextjs-mf.

Scenario

Host running on older version: module federation : 6.2.3, next:12.2.0, react: 17.0.2

Remote running on the latest version of all the above packages.

My remote application works in standalone mode, as well as some of the components are exposed via mf, and consumed by host.

The problem is, I am either able to run the host application or the remote application.

If I make the shared config of remote to {}, I am able to run the remote application but get the error in the host application.

If I make the shared config as this

const shared = {
  react: {
    singleton: true,
    import: false,
    requiredVersion: false
  },
  'react-dom': {
    singleton: true,
    import: false,
    requiredVersion: false
  }
}

I get the react not found error in the remote application but my host works in this case.

P.S: I can't update the host packages to latest version as it loads many other modules, which starts breaking.

Reproduction

https://github.com/a-utkarsh/next-mf-poc.git

Used Package Manager

npm

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 1.27 GB / 7.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm

Validations

• [X] Read the docs.
• [X] Read the common issues list.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Module federation issue and not a framework-specific issue.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[2heal1]

Upgrade @module-federation/nextjs-mf@8.4.13 and set shareStrategy as loaded-first , the issue should be fixed

detail commit: https://github.com/2heal1/next-mf-poc/commit/5b36d480750f82a5fcc6a1d7eff7db13c3008132

[2heal1]

sorry i forget to set registry , you need to delete webpack from your package.json , i will push again . Cause the reply includes internal domain , i will delete this reply

[2heal1]

I fix lockfile and push again , @a-utkarsh you can try again

[a-utkarsh]

Hi @2heal1 thanks, it worked. But can you please tell me, is there anyway I can do the same with the older version of module federation in the host. I don't want to modify anything the host application. In my use case, both host and remote application independently gets deployed. That's why I don't want to change anything in host app

[2heal1]

Hmm i'm afraid it can not , because host use @module-federation/nextjs-mf@6.2.3 which is not using mf 2.0 , so many features can not work

[2heal1]

@ScriptedAlchemy , do you have any ideas to solve this issue ? They just use mf 1.0 + next.js

[ScriptedAlchemy]

You are missing getInitialProps or get server props. https://module-federation.io/practice/frameworks/next/index.html

You must have a data method on document and app at least, otherwise it will SSG and there will be no react to begin with.

[ScriptedAlchemy]

Id also suggest upgrading from v6 to v8 Whatever the problem is, will not be retroactively fixed and alot has changed since v6 - but at a glance the problem is you have no data methods in the pages so theres no react on the server