Error: Minified React error #321;

[R-AS]

I tried to use remote components in two sub-projects based on qiankun, and this error was reported when switching sub-applications. Is there any solution? bug:

This is my configuration: host1:

Federation({
  remotes: {
    remote: 'https://remote-dev.cn/static/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
}),

host1:

Federation({
  remotes: {
    remote: 'https://remote-dev.cn/static/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
}),

remote:

Federation({
  name: 'remote',
  filename: `remoteEntry_${version}.js`,
  exposes: {
    './Button': '/src/moduleFederationComponents/Button',
  },
  shared: ['react', 'react-dom',],
}),

[R-AS]

error details:

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at p (__federation_shared_react-f847c8d7.js:12:3773)
    at u.useRef (__federation_shared_react-f847c8d7.js:12:5849)
    at withSelector_production_min.useSyncExternalStoreWithSelector (index-bd5e1e5b.js:264:361)
    at useStore (index-bd5e1e5b.js:264:1303)
    at de (index-bd5e1e5b.js:264:1513)
    at useMessage (index-bd5e1e5b.js:268:11357)
    at App (index-bd5e1e5b.js:820:16207)
    at Ch (react-dom.production.min.js:157:137)
    at ck (react-dom.production.min.js:267:460)
    at bk (react-dom.production.min.js:250:347)

[satyam-veris]

Hi, I am also facing this issue when using the same remote app in two different micro-frontends kept within a single spa root app. This occurs when I switch between these two apps, The first app loads perfectly but when I navigate to other app i get this same error, when switched back to first app, that app breaks as well.

Were you able to figure out anything?

[R-AS]

Hi, I am also facing this issue when using the same remote app in two different micro-frontends kept within a single spa root app. This occurs when I switch between these two apps, The first app loads perfectly but when I navigate to other app i get this same error, when switched back to first app, that app breaks as well.

Were you able to figure out anything?

Hello, I looked at the vite-plugin-federation source code and found that when switching to the next application, the React instance of the previous application is still used. In desperation, I adopted this plan.(The disadvantage is that the react version must be consistent)

1. The remote and host transform react/react-dom imports into global variables，you can use rollup-plugin-external-globals，vite.config.ts just like:

import externalGlobals from "rollup-plugin-external-globals"

build: {
    rollupOptions: {
        external: ['react', 'react-dom'],
        plugins: [
            externalGlobals({
                'react': 'React',
        'react-dom': 'ReactDOM'
            }),
        ]
    }
}

2. remote and host shared without react/react-dom
3. remote and host use portal's React/ReactDOM, portal's code just like:

   
   import React from 'react'
   import ReactDOM from 'react-dom'

Object.defineProperty(window, 'React', { value: React, writable: false, configurable: false, }) Object.defineProperty(window, 'ReactDOM', { value: ReactDOM, writable: false, configurable: false, })

[JessYan0913]

3. portal

How should I use the portal code?

[satyam-veris]

3. use portal's React/ReactDOM, portal's code just like:

Externalize react and react-dom from each and every micro frontends, and create a global scoped variable from the portal app/root/container

You can define the global variable in the entry file of your root app/container/portal app