Sharing of react packages doesn't work in react-vite example

[msaktor]

Versions

• "@originjs/vite-plugin-federation": "^1.2.3",
• vite: "vite": "^4.0.3"
• "react": "^18.2.0"
• "react-dom": "^18.2.0"
• pnpm 7.3.0

Reproduction

I am running the react-vite example from this repo https://github.com/originjs/vite-plugin-federation/tree/6fdca142d780ffd270e0192ef0fe86df552adb6d/packages/examples/react-vite

Steps to reproduce

• Run pnpm serve
• or pnpm build and then run the host and remote individually (both behave the same)

What is Expected?

React dependency is shared and served only once.

What is actually happening?

Both host and remote loads react = dependency is not shared (it's loaded twice).

build:

serve:

[ciddan]

This seems to be a consequence of the new jsxRuntime in react. If you, in the vite.config.ts file of the remote, switch to the classic runtime react is shared as expected.

export default defineConfig({
  plugins: [
    react({ jsxRuntime: "classic" }),
  ],
  // etc
});

Not suggesting this as a solution, but it's a lead as to where to start digging.

---

Edit:

I was able to get proper sharing happening with the 'automatic' jsx runtime with the following config in both host and remote:

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

const jsxRuntimePath = join(__dirname, 'node_modules', 'react', 'jsx-runtime.js')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      // other config
      shared: {
        'react': {},
        'react/jsx-runtime': {
          packagePath: jsxRuntimePath,
        },
        'react-dom': {},
      }
    })
  ],
  // etc
});

[msaktor]

Thanks a lot for quick reply @ciddan , that helped!

[AsuraKev]

Getting :(

[nguyenbatranvan]

not working!!!

[nguyenbatranvan]

Thanks a lot for quick reply @ciddan , that helped!

not work for me

[ghost]

not working for me, also not only react but other shared deps were being loaded multiple times

[AsuraKev]

working in version 1.1.14

[pedrotainha]

This does not seem correct....

@ruleeeer any ideia about this issue and how could be solved? Starting from version 1.2.0, react package is duplicated (at least, i don't have deeper examples for now )

Thanks in advance