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.

[grzesiek-ds]

Hello @flyfishzy I see that You picked up this issue few days ago, thats great! I just wanted to highlight that the same issue (but different error) applies to react 17. React is throwing error https://reactjs.org/docs/error-decoder.html/?invariant=321 but from what I've noticed, it appears that react instance is also equal to null (same problem as react 18).

There are two minimal repos with reproduced issue. Notice that I also want to consume module inside of worker file. This is something that is not working in webpack, but it does in vite 🎆

https://github.com/grzesiek-ds/vite-host https://github.com/grzesiek-ds/vite-module

[rastiben]

Hello, I actually have the same problem with Vite 4. The problem does not occur with Vite 2.8. I see that work is in progress on it but I wanted to know what you advise. We have a rather urgent need to share a module present in a Vite config and to use it in a Webpack config. Do you recommend leaving Vite for now?

[chiffenok]

Hello, I actually have the same problem with Vite 4. The problem does not occur with Vite 2.8. I see that work is in progress on it but I wanted to know what you advise. We have a rather urgent need to share a module present in a Vite config and to use it in a Webpack config. Do you recommend leaving Vite for now?

@rastiben for me it's not working with Vite 2.8 neither (( Do you maybe have reproduction code?

[flyfishzy]

We have released a new version v1.2.0, please try this version and check if the problem is fixed.

[rastiben]

I confirm that it works perfectly! Thank you very much for the work!

[Sergey-Makkoev]

I updated to version 1.2. But I have the same error. As soon as a component from antd appears in the remote project, an error appears: Cannot read properties of null (reading 'useState').

https://github.com/Sergey-Makkoev/vite-antDesign

[ytftianwen]

Same error here，cann't use useState in shared component, any idea about this？

[chiffenok]

Same error here，can't use useState in shared component, any idea about this？

For me, it seems to work so far. Maybe try to make sure that the package really updated? I mean I needed to remove /node_modules and yarn.lock because the old version was cached

[ytftianwen]

Same error here，can't use useState in shared component, any idea about this？

For me, it seems to work so far. Maybe try to make sure that the package really updated? I mean I needed to remove /node_modules and yarn.lock because the old version was cached

Year, it works finally, thks~

[grzesiek-ds]

@flyfishzy Update fixes the issue with shared react instance, but unfortunately it brings another issue. Right now, it's not possible to consume federated module inside of web worker script.

In addition to that, inside of federated module, it's not possible to destructure import like import { useState } from 'react', we have to import React from 'react'.

In example repositories, I've updated both vite and @originjs/vite-plugin-federation to latests versions. Simply npm/yarn install and then run build and preview scripts.

https://github.com/grzesiek-ds/vite-host https://github.com/grzesiek-ds/vite-module

error while building host:

host config:

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';
import react from '@vitejs/plugin-react';
import { dependencies } from './package.json';

export default defineConfig({
  build: {
    target: 'esnext'
  },
  worker: {
    format: 'es',
  },
  server: {
    port: 3005,
  },
  plugins: [
    react(),
    federation({
      name: 'host',
      remotes: {
        myModule: 'http://localhost:3008/assets/remoteEntry.js',
      },
      shared: {
        react: {
          version: dependencies.react,
          requiredVersion: dependencies.react,
        },
        'react-dom': {
          version: dependencies['react-dom'],
          requiredVersion: dependencies['react-dom'],
        },
      },
    }),
  ],
});

module config:

export default defineConfig({
  build: {
    target: 'esnext'
  },
  preview: {
    host: 'localhost',
    port: 3008,
    strictPort: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  plugins: [
    react(),
    federation({
      name: 'myModule',
      filename: 'remoteEntry.js',
      exposes: {
        './testValue': './src/testValue',
        './WithoutState': './src/WithoutState',
        './WithState': './src/WithState',
      },
      shared: {
        react: {
          generate: false,
          version: dependencies.react,
          requiredVersion: dependencies.react,
        },
      },
    }),
  ],
});

[ruleeeer]

I updated to version 1.2. But I have the same error. As soon as a component from antd appears in the remote project, an error appears: Cannot read properties of null (reading 'useState').

Sergey-Makkoev/vite-antDesign

@Sergey-Makkoev I tried your project and I have a question, why do I need to exposes itself and then refer to it after? After I changed some of the code I got this screen. Comment out the remotes app to replace it with a local reference

 remotes: {
        // app: 'http://localhost:5001/assets/remoteEntry.js',
        shared: 'http://localhost:5000/assets/shared.js',
      },

[vileppanen]

Experiencing this issue still, with following dependencies in both remote & host:

"@originjs/vite-plugin-federation": "^1.2.2", "@vitejs/plugin-react": "^4.0.0", "vite": "^4.3.2", "react": "^18.2.0", "react-dom": "^18.2.0"

removed node_modules, package-lock & re-installed deps but still no luck.

Running on node 16.15.0 & npm 8.5.5, macOS

[vileppanen]

Experiencing this issue still, with following dependencies in both remote & host:

"@originjs/vite-plugin-federation": "^1.2.2", "@vitejs/plugin-react": "^4.0.0", "vite": "^4.3.2", "react": "^18.2.0", "react-dom": "^18.2.0"

removed node_modules, package-lock & re-installed deps but still no luck.

Running on node 16.15.0 & npm 8.5.5, macOS

Dug little deeper, and it seems that in my case, everything works fine in version 1.1.14. When upgrading to 1.2.0, the errors start occurring.

So, If I'm not totally offset, there's something in these changes that introduce some breaking change: https://github.com/originjs/vite-plugin-federation/compare/99c44e40e129185cfd3cd0a0984244ad71a09941...e78a42e4c68f634633cf8b0620199c5ed12f5267

[dawidcxx]

Stumbled on the same problem as @vileppanen same solution also worked for me. I am in the process of migrating a rather large cra/craco/mf setup so I can't really pinpoint the exact issue. The downgrade worked fine, will try to do some investigation later if this keeps being a problem.

[wenyichen]

I ran into the same problem, for some reason when I define shared modules on the remote side

shared: {
  react: {
    requiredVersion: '^18.2.0',
    version: '^18.2.0',
  },
  'react-dom': {
    requiredVersion: '^18.2.0',
    version: '^18.2.0',
  },
},

will not work, but

shared: ['react', 'react-dom']

works

[sumcoding]

I was running into this exact error when trying to run multiple remote react as apps in a host, this is my setup here: https://github.com/sumcoding/react-in-vue which should be all up to date on versions as recommended here.

I am attempting to pull in the react apps in a bit of a different way then the react-in-vue example does, using v-html is not an option for me, also needing react as a dependency of the host is something I would also like to avoid.

I was able to get rid of the actual error by destructuring react-dom/client as the latest react docs recommend

from this

import App from "./App";
import ReactDOM from "react-dom";

const mount = (el) => {
  ReactDOM.createRoot(el).render(<App />);
}
export { mount }

to this

import App from "./App";
import { createRoot } from "react-dom/client";

const mount = (el, identifierPrefix = 'react-app-two') => {
  const root = createRoot(el, { identifierPrefix })
  root.render(<App />);
}

export { mount }

And that appeared to work at first, but what it seems to have actually done is caused the bundler to not externalize react-dom as it was previously and so when I have multiple react apps I also load in multiple react-dom's

"react": "^18.2.0", "react-dom": "^18.2.0", "vue": "^3.3.4", "@originjs/vite-plugin-federation": "^1.2.3", "@vitejs/plugin-react": "^4.0.0", "@vitejs/plugin-vue": "^4.2.3", "vite": "^4.3.9"

[dworzycp]

Same issue here when trying to import a React component and sadly none of the workarounds seem to fix it for me.

react: 18.2.0
vite: 4.3.9
@originjs/vite-plugin-federation: 1.2.3

[nick4fake]

Same issue with NextJS nextjs-mf plugin

[oychao]

Same issue here.

"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"vite": "^4.3.8",

[nguyenbatranvan]

Same issue here.

"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"vite": "^4.3.8",

I can make a few speculations about your project:

1. Only 1 node_modules and package.json shared for both remote and host?

[mariojfduarte]

same issue

I was able to come down to a single component (in my case) that throws 'Cannot read properties of null (reading 'useState')' when imported as a federated module after build: react-material-ui-carousel

HOST:

import federation from "@originjs/vite-plugin-federation";
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default ({ mode }) => {
  // Load app-level env vars to node-level env vars.
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    server: {
      open: false,
      port: 3000
    },
    preview: {
      port: 3000
    },
    build: {
      outDir: "build", // Set the desired output folder name
      target: "esnext"
    },
    optimizeDeps: {
      include: ["fs"]
    },
    plugins: [
      react(),
      federation({
        name: "platform",
        filename: "remoteEntry.js",
        remotes: {
          prospect: "http://localhost:3002/assets/remoteEntry.js"
        },
        shared: ["react", "react-dom", "react-router-dom", "react-redux", "@reduxjs/toolkit"]
      })
    ]
  });
};`

REMOTE

import federation from "@originjs/vite-plugin-federation";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  base: "http://localhost:3002",
  server: {
    open: false,
    port: 3002
  },
  build: {
    // modulePreload: false,
    outDir: "build",
    target: "esnext"
    // minify: false,
    // cssCodeSplit: false
  },
  optimizeDeps: {
    include: ["fs"]
  },
  plugins: [
    react(),
    federation({
      filename: "remoteEntry.js",
      exposes: {
        "./Prospect": "./src/screens/Prospect.jsx",
        "./ProspectComps": "./src/screens/ProspectComps.jsx"
      },
      shared: [
        "react",
        "react-dom",
        "react-router-dom",
        "react-redux",
        "@reduxjs/toolkit",
        "react-material-ui-carousel"
      ]
    })
  ]
});

also tried adding: react-material-ui-carousel, @mui/material etc etc as shared

if I remove the component, everything works fine. what am I missing?

[nguyenbatranvan]

same issue

I was able to come down to a single component (in my case) that throws 'Cannot read properties of null (reading 'useState')' when imported as a federated module after build: react-material-ui-carousel

HOST:

import federation from "@originjs/vite-plugin-federation";
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default ({ mode }) => {
  // Load app-level env vars to node-level env vars.
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    server: {
      open: false,
      port: 3000
    },
    preview: {
      port: 3000
    },
    build: {
      outDir: "build", // Set the desired output folder name
      target: "esnext"
    },
    optimizeDeps: {
      include: ["fs"]
    },
    plugins: [
      react(),
      federation({
        name: "platform",
        filename: "remoteEntry.js",
        remotes: {
          prospect: "http://localhost:3002/assets/remoteEntry.js"
        },
        shared: ["react", "react-dom", "react-router-dom", "react-redux", "@reduxjs/toolkit"]
      })
    ]
  });
};`

REMOTE

import federation from "@originjs/vite-plugin-federation";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  base: "http://localhost:3002",
  server: {
    open: false,
    port: 3002
  },
  build: {
    // modulePreload: false,
    outDir: "build",
    target: "esnext"
    // minify: false,
    // cssCodeSplit: false
  },
  optimizeDeps: {
    include: ["fs"]
  },
  plugins: [
    react(),
    federation({
      filename: "remoteEntry.js",
      exposes: {
        "./Prospect": "./src/screens/Prospect.jsx",
        "./ProspectComps": "./src/screens/ProspectComps.jsx"
      },
      shared: [
        "react",
        "react-dom",
        "react-router-dom",
        "react-redux",
        "@reduxjs/toolkit",
        "react-material-ui-carousel"
      ]
    })
  ]
});

also tried adding: react-material-ui-carousel, @mui/material etc etc as shared

if I remove the component, everything works fine. what am I missing?

Can I predict that, if the host is running in a production environment, this problem will no longer occur?

[mariojfduarte]

Nop, it still occurs @nguyenbatranvan

[mariojfduarte]

"@originjs/vite-plugin-federation": "^1.2.3",
"@vitejs/plugin-react": "^4.0.3",
"react": "^18.2.0",
"vite": "^4.4.3",

[nguyenbatranvan]

i see, missing react-material-ui-carousel in host config, Host:

plugins: [
      react(),
      federation({
        name: "platform",
        filename: "remoteEntry.js",
        remotes: {
          prospect: "http://localhost:3002/assets/remoteEntry.js"
        },
        shared: ["react", "react-dom", "react-router-dom", "react-redux", "@reduxjs/toolkit","react-material-ui-carousel"]
      })
    ]

and add config to remote:

preview: {
    port: 3002
  }

then in remote run npm run preview then in host npm run dev good luck

[yuvalbne]

Hi, I am facing the same issue

"@originjs/vite-plugin-federation": "^1.2.3", "@vitejs/plugin-react": "^4.0.0", "react": "^18.2.0", "vite": "^4.3.9",

Any thoughts?

[Dariocoding]

same issueeeeeeeeeeeeeeeeeeeeee

[mariojfduarte]

Hi, I am facing the same issue

"@originjs/vite-plugin-federation": "^1.2.3", "@vitejs/plugin-react": "^4.0.0", "react": "^18.2.0", "vite": "^4.3.9",

Any thoughts?

what other dependencies are you using? can you share your vite.config?

[lukewhitehouse]

I think this is similar to an issue I'm seeing when sharing a component from a NextJS SSR remote to a React SSR host. The component fails to load when a named export from React is used, such as useEffect. I get the following error:

TypeError: Cannot read properties of null (reading 'useEffect')
     at useEffect (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/node_modules/react/cjs/react.development.js:1634:21)
     at ExportredTitle (webpack-internal:///./components/exposedTitle.js:13:53)
     at pn (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/about/dist/server/427.js:2:72535)
     at mn (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/about/dist/server/427.js:2:73311)
     at mn (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/about/dist/server/427.js:2:75226)
     at yn (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/about/dist/server/427.js:2:80487)
     at Tn (/path/to/module-federation-examples/nextjs-ssr-react-18-ssr/about/dist/server/427.js:2:83878)

https://github.com/module-federation/module-federation-examples/issues/3115

[erkanisuf]

I am having similar issues with useState, useRef and most likely with every hook: "vite": "^4.4.5" "@vitejs/plugin-react-swc": "^3.3.2",

"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"

[wenyichen]

If it helps anyone I ran into this issue and eventually had to downgrade the entire remote to Webpack to use Webpack module federation, the host we kept as Vite. We ran into too many issues with a bunch of dependencies like React, monaco-editor, and the hooks mentioned above.

[erkanisuf]

If it helps anyone I ran into this issue and eventually had to downgrade the entire remote to Webpack to use Webpack module federation, the host we kept as Vite. We ran into too many issues with a bunch of dependencies like React, monaco-editor, and the hooks mentioned above.

I am also using Vite Host but remote is Webpack but getting same weror. No issues webpck to webpck but in vite doesnt work i cant even build. Can we have example how are your config files ?

[wenyichen]

Here's an excerpt of the relevant parts:

vite.config.ts (Host)

/** @type {import('vite').UserConfig} */
const config = {
    ssr: {
        noExternal: ['@originjs/vite-plugin-federation', 'react-dom', 'react'],
    },
    build: {
        target: 'esnext',
    },
    plugins: [
        federation({
            name: 'host-app',
            remotes: {
                sharedComponents: {
                    external: 'http://localhost:5001/remoteEntry.js',
                    externalType: 'url',
                    format: 'var',
                    from: 'webpack',
                },
            },
            shared: ['react', 'react-dom'],
        }),
    ],
};

webpack.config.cjs (Remote)

module.exports = {
  entry: path.resolve(__dirname, 'src/index'),
  target: 'web',
  experiments: {
    topLevelAwait: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'sharedComponents',
      filename: 'remoteEntry.js',
      exposes: {...}
      shared: { react: { eager: true, requiredVersion: '^18.2.0' }, 'react-dom': { eager: true, requiredVersion: '^18.2.0' } },
    }),
  ].filter(Boolean),
  output: {
    clean: true,
    publicPath: '/',
  },
};

[erkanisuf]

I just realized this works in production/build mode. But it doesn't work in dev server of Vite -_^ any ideas? 😿

[zilahir]

same issue here as well

[wopelo]

"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"

Same issue, I use lerna to manage projects, and this is my project:

--| packages
----| app1
------| node_modules
----| app2
------| node_module
--| lerna.json
--| node_modules

If I install dependencies to their own node_modules, it works fine. But when I install dependencies to root node_modules, it runs incorrectly. This error just occur in development. Demo: https://github.com/wopelo/react-vite-federation-demo

[wopelo]

"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"

Same issue, I use lerna to manage projects, and this is my project:

--| packages
----| app1
------| node_modules
----| app2
------| node_module
--| lerna.json
--| node_modules

If I install dependencies to their own node_modules, it works fine. But when I install dependencies to root node_modules, it runs incorrectly. This error just occur in development. Demo: https://github.com/wopelo/react-vite-federation-demo

I think I've found a solution. Previously, in app1's vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'app1',
      remotes: {
        app2: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react','react-dom'],
    })
  ],
  build: {
    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
  }
})

When I visit http://127.0.0.1:5000/, an error occurs. But when I visit http://localhost:5000/, it works fine. So, I change app1's vite.config.ts as:

export default defineConfig({
  server: {
    port: 5000,
    host: '127.0.0.1',
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'app1',
      remotes: {
        app2: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react','react-dom'],
    })
  ],
  build: {
    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
  }
})

The situation has reversed. When I visit http://127.0.0.1:5000/, it works fine. But when I visit http://localhost:5000/,an error occurs. I feel confused.