fix: solve errors with mixing dev/prod React apps

[gioboa]

Close #476

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@module-federation/vite@491

commit: 03a3b95

[wojtask9]

out of curiosity. Why different paths for react ?

[gioboa]

The PR is not working, in fact tests are failing. With react 18 mix dev and prod is not a problem but with React 19 is not working anymore. 😞 I spent 2 days on this issue and it's still not working

[alternativniy]

@gioboa I struggled for a long time with mixing dev and prod React 19 apps. The error I kept encountering was “dispatcher.getOwner is not a function”. I imagine there are others as well

The only solution I came up with is to switch React to production mode using the Vite plugin for the dev server when mixing dev and prod builds

// vite.config.ts plugins section
react({
  reactRefreshHost: isDev && isMF ? "http://localhost:5001" : undefined,
  babel: {
    plugins: ["babel-plugin-react-compiler"],
    presets:
      isDev && !isMF
        ? [
            [
              "@babel/preset-react",
              { runtime: "automatic", development: false },
            ],
          ]
        : [],
  },
})

Plus, add all React dependencies to shared, such as: react/jsx-runtime, react/jsx-dev-runtime, react/compiler-runtime, react-dom/client

It's actually a bad solution, since it completely breaks HMR, but at least it works to some extent. I hope this helps in some way...

[alternativniy]

I also tried replacing the shared React instance with the dev version using a runtime plugin, but it still breaks after the build.

Getting Vite to build the dev version alongside the prod version is quite a challenge; I did this using esbuild with a separate Node script. This is probably a more promising approach—you could try using a proxy to build both versions and switch between them based on some specific criteria.

[gioboa]

@alternativniy I started again from a clean main code and with this simple changes the vite-vite example is working with host dev and remote prod.

[alternativniy]

@gioboa It’s expected that everything will work correctly with the host dev. In practice, however, the opposite is usually required host prod and remote dev.

For example, we need this so that each remote’s dev server can be launched separately and operate independently of the host.

[gioboa]

For example, we need this so that each remote’s dev server can be launched separately and operate independently of the host.

my latest commit supported both mixed scenarios.

[gioboa]

Tests With Different Frameworks

[devinrhode2]

Just started to read code.. still piecing things together... react 19 src must have some of these chars?

[devinrhode2]

Seems like a code comment would go a long ways here

[devinrhode2]

Cleaning up old browser tabs... curious what this change was about

[devinrhode2]

One question I have: Why did react think we're in a testing environment??

[gioboa]

We need to set production to serve the correct bundle.