React TypeError: Cannot read properties of null (reading 'useState')

[guoxiaxing]

Versions

• vite-plugin-federation: 1.1.10
• vite: 3.2.3

Reproduction

Additional Details

clone this repo https://github.com/guoxiaxing/vite-FM,
cd into each directory and run pnpm install. cd remote directory and run pnpm build && npx vite preview --port=3001 --strictPort, then cd host directory and run pnpm run dev.

Steps to reproduce

above

What is Expected?

all working

What is actually happening?

but http://localhost:5173/ not work, and throw Uncaught TypeError: Cannot read properties of null (reading 'useState')
at react_production_min.useState

[Yulingsong]

遇到同样的问题了，请问有解决吗

[Rudel-git]

the same. It looks no bad until importing react. the examples don't consist of any react imports

[flyfishzy]

Please try to upgrade to vite 4.0 & @originjs/vite-plugin-federation ^1.1.13

[Rudel-git]

host: dev
remote: preview
shared: ['react', 'react-dom']

Versions

• "@originjs/vite-plugin-federation": "^1.1.13",
• "vite": "^4.0.4",
• "@vitejs/plugin-react": "^3.0.1",
• "react": "^18.2.0",
• "react-dom": "^18.2.0"

updated and now got. reactexports is undefined, default has the value

[toanil315]

host: dev remote: preview shared: ['react', 'react-dom']

Versions

• "@originjs/vite-plugin-federation": "^1.1.13",
• "vite": "^4.0.4",
• "@vitejs/plugin-react": "^3.0.1",
• "react": "^18.2.0",
• "react-dom": "^18.2.0"

updated and now got. reactexports is undefined, default has the value

@RudikS-git , @flyfishzy
same problem, do you have any update about this?

[flyfishzy]

Can you provide a reproduction repo? @RudikS-git @toanil315

[TimKolberger]

I created a reproduction for the original error with updated versions here: https://github.com/TimKolberger/issue-reproduction-vite-federated-modules

I prepared the repo be easy to setup:

git clone git@github.com:TimKolberger/issue-reproduction-vite-federated-modules.git repro-issue-294 \
  && cd $_ \
  && pnpm install \
  && pnpm build \
  && pnpm preview

Error

Cannot read properties of null (reading 'useState')

_federation_shared_ is registered, but not used:

Versions in host and remote project:

  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    ...
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "1.1.14",
    "@vitejs/plugin-react": "3.0.1",
    "vite": "4.0.4",
    ...
  }

Host vite.config.ts:
https://github.com/TimKolberger/issue-reproduction-vite-federated-modules/blob/main/packages/host/vite.config.ts

Remote vite.config.ts:
https://github.com/TimKolberger/issue-reproduction-vite-federated-modules/blob/main/packages/widget/vite.config.ts

[0ro]

I have the same issue. Any ideas on how to quickly fix it?

[chiffenok]

I have the same issue. Any ideas on how to quickly fix it?

I'm joining to the question . I just switch from create-react-app to vite and really love it. don't want to switch to webpack just to use webapack Module federation plugin

[toanil315]

I have the same issue. Any ideas on how to quickly fix it?

If you just want to run it, so delete line shared: ['react', 'react-dom'], it work for me. Waiting for @flyfishzy fix it
The error happened to me was vite shared create 2 instance of react and this cause error

[0ro]

If you just want to run it, so delete line shared: ['react', 'react-dom'], it work for me. Waiting for @flyfishzy fix it
The error happened to me was vite shared create 2 instance of react and this cause error

It still doesn't work I have a host application with React and two remotes with the same React version. I already tried a lot of combinations with shared options and no one works. @flyfishzy you are only my hope, I don't want to go back to CRA

[Sergey-Makkoev]

I have the same problem when using ant design. I also tried everything, nothing helps.

When I add the ant design component, an error appears: Uncaught TypeError: Cannot read properties of null (reading 'useContext')

[mndbndr]

@flyfishzy wrote:

Can you provide a reproduction repo? @RudikS-git @toanil315

@flyfishzy you can break the existing example "react-vite" in this repo just by adding "const [ state ] = React.useState(0);" to the Button.jsx. You don't even have to use the state variable anywhere.

Here is the full modified Button.jsx file:

    import React from "react";
    import "./Button.css";

    export default ({caption = "Shared Button"}) => {
        const [ state ] = React.useState(0);

        return (
            <button className='shared-btn'>{caption}</button>
        )
   }

I am in the same boat as everyone else. I love Vite and need module federation and don't want to go back to webpack. Please advise. Thank you.