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

[rahulsivalenka]

I am trying to setup two React + Vite + Typescript applications, one host, the other remote using the vite-plugin-federation. After building and running both applications using vite preview, when running the host app I am getting the following error:

My Vite config for each of the apps are as follows:

Host app

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

// HOST
// https://vitejs.dev/config/
export default defineConfig({
  preview: {
    port: 3000,
  },
  build: {
    target: "esnext",
    minify: false,
  },
  plugins: [
    react(),
    federation({
      remotes: {
        remote: "http://localhost:3001/assets/remoteEntry.js",
      },
      shared: {
        react: {
          requiredVersion: "^18.2.0",
          singleton: true,
          // version: "18.2.0",
        },
        "react-dom": {
          requiredVersion: "^18.2.0",
          singleton: true,
        },
      },
    }),
  ],
});

Remote app

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

// REMOTE
// https://vitejs.dev/config/
export default defineConfig({
  preview: {
    port: 3001,
  },
  build: {
    target: "esnext",
    minify: false,
  },
  plugins: [
    react(),
    federation({
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App.tsx",
      },
      shared: {
        react: {
          requiredVersion: "^18.2.0",
          singleton: true,
        },
        "react-dom": {
          requiredVersion: "^18.2.0",
          singleton: true,
        },
      },
    }),
  ],
});

I have tried various combinations of the config but nothing works by referring to React ESM example (which uses rollup), also looked at vue3-demo-webpack-esm-esm example for reference. Next step, once this works, is for me to try to make React + Webpack + Typescript app as host and React + Vite + Typescript app as remote.

Plz help me understand what I might be missing.

Find repro here. I have committed the dist folders of the apps here for reference of the files generated after the build.

[rahulsivalenka]

Hello. Any suggestions that could help solve this problem?

[Jiannan-dev]

I think this issue #173 will help you

[rahulsivalenka]

Thank you for your reply.

Yes, I found that it works after building and serving them with vite preview. Here's my trial repo that worked for me with both host and remote using ViteJS.

I moved on to setting up a host using webpack and using the same remote as above (see branch:webpack-vite-trial). However, in this case I am getting the exact error as #173.

I tried both the suggestions suggested in the issue 173's comments:

1. Using React.useState instead of destructuring useState from react.
2. Building both webpack host and vite remote app and serving them.

In both cases I am getting the same issue TypeError: Cannot read properties of undefined (reading: 'exports').

Vite as a host is giving the right imported react module structure which seems to be compatible with what is expected in the __federation_expose_App_....js file.

When using webpack as host, the structure of the react module shared by webpack is different and this is causing the above TypeError issue.

I have configured webpack to output as module:

// webpack.config.js
//...
return {
  target: 'es2020',
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host-webpack',
      library: { type: 'module' },
      filename: 'remoteEntry.js',
      remotes: {
        // this is the URL of the vite remote app running in preview mode
        remote: 'http://localhost:8082/assets/remoteEntry.js',
      },
      shared: {
        ...pkg.dependencies,
        react: {
          // eager: true,
          // singleton: true,
          requiredVersion: pkg.dependencies['react'],
        },
        'react-dom': {
          // eager: true,
          // singleton: true,
          requiredVersion: pkg.dependencies['react-dom'],
        },
      },
    }),
    //...
  ],
  //...
};
//...

(see full config here which was generated by ejecting a new CRA app)

Is it something in my webpack configuration that is causing the structure of the imported React module to change?

Again, thank you so much for taking the time to help me out.

[Jiannan-dev]

It looks like the webpack generated chunk and vite (esbuild and rollup to be exact) generated chunk is not consistent, later I clone your repo to see the specific problem, thank you for your feedback

[rahulsivalenka]

Looking forward to a newer version. Thanks for your help.

[rlesniak]

Any news here? I am facing identical issue... @ruleeeer

[chitralverma]

Any help on this ?

[chitralverma]

@flyfishzy @ruleeeer any help?

[Arpan1089]

Any work around to fix this ??

[robertovg]

Any updates on this? I'm facing the same problem, components, if remote components exported are not using React... which is un-useful.

[robertovg]

I have the solution for this: #242 (comment)

We should have a working solution compatible with the last version of the library though.