React TypeError: Cannot read properties of undefined (reading 'exports')

[philals]

Thanks for spending the time to read this issue.

I have read and attempted fixes listed here:

• simple-react-esm React code errors #162
• TypeError: Cannot read properties of undefined (reading 'exports') #122
• Issue with shared react dependency #161

Both host and remote are Vite projects

Versions

"@originjs/vite-plugin-federation": "1.1.4",

Reproduction

Clone this repo https://github.com/philals/reading-exports-issue/

cd into each directory and run npm install && npm run watch. This will run the container in dev mode (localhost:3000) and the remote served statically on localhost:3001

Confirm working

Uncomment this line: https://github.com/philals/reading-exports-issue/blob/master/app/src/App.tsx#L6

Refresh browser, issue encountered.

Additional Details

Steps to reproduce

Above

What is Expected?

All working

What is actually happening?

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'exports')

[Jiannan-dev]

I recommend using React.useState instead of useState, or you can continue to use useState but need to start the host using build&serve mode (instead of the existing dev)

[Jiannan-dev]

The root cause of this problem is the need to keep the shared product consistent in esbuild (vite dev mode) and rollup (vite build mode), otherwise it will cause problems, esuild and rollup are consistent in the esm library, but unfortunately react is a cjs library, if react switch to esm this problem does not exist, otherwise you can only use some specific usage to circumvent

[philals]

Thanks for the heads up @ruleeeer

Confirmed it has resolved my issue.

Have pushed a new commit to my demo with fix for anyone else philals/reading-exports-issue@5011512

[SaiMadhav9494]

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.

link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend

remote app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

[ccreusat]

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.

link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend

remote app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

Hi!

Same error here.. can't find a fix.

[Yulingsong]

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.
link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend
remote app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

Hi!

Same error here.. can't find a fix.

me too,Did you solve the problem ？

[mndbndr]

Has there been any answer to the issue of using hooks in the remote app and crashing the host app? I am unable to find a solution that works for this issue. I love Vite and want to stick with it, but I am now afraid I will have to go back to webpack to get module federation with hooks working. Thank you.