Error sharing "react-dom" in dev mode

[RussellCanfield]

Everything has been working pretty well so far 🙂 I did run into one issue when sharing "react-dom" in dev mode:

chunk-5GRLQEB4.js?v=8f475596:27 Uncaught (in promise) TypeError: factory is not a function
    at chunk-5GRLQEB4.js?v=8f475596:27:29
    at async chunk-5GRLQEB4.js?v=8f475596:34:97

This line in the bundle:

const mfproxyawaitrequire_vite_mf_2_host_loadShare_react_mf_2_dom_loadShare = await require_vite_mf_2_host_loadShare_react_mf_2_dom_loadShare();

It seems like when it calls into the runtime, the host's options -> shared, is missing react-dom, although the Vite plugin specifies it.

Maybe in here?

vite/src/plugins/pluginProxySharedModule_preBuild.ts

Line 40 in b1bba84

addUsedShares(source)

[zhangHongEn]

Can you provide a reproducible example?
Also, does it reproduce when you run this example?

[zhangHongEn]

It should be the same issue as this one, I will fix it today #89

…

---- Replied Message ---- | From | Russell ***@***.***> | | Date | 09/17/2024 05:37 | | To | module-federation/vite ***@***.***> | | Cc | Subscribed ***@***.***> | | Subject | [module-federation/vite] Error sharing "react-dom" in dev mode (Issue #88) | Everything has been working pretty well so far 🙂 I did run into one issue when sharing "react-dom" in dev mode: chunk-5GRLQEB4.js?v=8f475596:27Uncaught(inpromise) TypeError: factoryisnotafunctionatchunk-5GRLQEB4.js?v=8f475596:27:29atasyncchunk-5GRLQEB4.js?v=8f475596:34:97 This line in the bundle: const mfproxyawaitrequire_vite_mf_2_host_loadShare_react_mf_2_dom_loadShare = await require_vite_mf_2_host_loadShare_react_mf_2_dom_loadShare(); It seems like when it calls into the runtime, the host's options -> shared, is missing react-dom, although the Vite plugin specifies it. Maybe in here? https://github.com/module-federation/vite/blob/b1bba84c563f5eea7e92aad250f422d0b624f664/src/plugins/pluginProxySharedModule_preBuild.ts#L40 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[tduforet]

Hello, I have the same error with my project using vite for the host and webpack for remotes but only on preview mode after a build. It works correctly in dev mode.

[gioboa]

Can you create a basic reproduction repo please?

[tduforet]

I tried but I don't have any errors with a simple project.

The error occurs here only with build and preview mode. It works correctly in dev mode.

with these shared dependencies

But I understand if you can't do anything without a reproduction repo.

[gioboa]

@tduforet are you using the latest release ?

[tduforet]

Yes, it wasn't the latest when I had the problem the first time. I updated the version to the latest and I always have the problem.

[gioboa]

I added the config below in the react example and it's working fine.

'react-dom': {
	singleton: true,
	strictVersion: true,
	requiredVersion: '18.3.1',
},
'react-router-dom': {
	singleton: true,
},

You can try to figure out step by step the piece of code that is creating that error. Without a failing example it's impossible to face the issue. I'm sorry

[tduforet]

Yes I understand, I try to add some log, the factory is false si maybe there is a problem on loadShare method for react.

Thanks for your help.

[zhangHongEn]

Here’s an important issue. It only occurs in build mode, and it would be great if you could provide a reproducible example.

[tduforet]

Hello, I removed one by one the different plugins I had in my project and it seems the plugin vite-plugin-svgr (4.2.0) is the problem.
When I add it in a simple project with only the react plugin and federation plugin I also have the error.

[tduforet]

For now I don't understand why but it works only if I use the svgr plugin after the federation plugin in the vite config.

[zhangHongEn]

For now I don't understand why but it works only if I use the svgr plugin after the federation plugin in the vite config.

plugins: [
  federation(),
  svgr()
]

Will adjusting the order solve the problem? That would be great!

[tduforet]

Yes it works when svgr is after federation but I don't know why 😅

[zhangHongEn]

The two plugins with "enforce": "pre" are conflicting; optimization could be considered.

[gioboa]

Yep, we need to consider it because we can have this kind of errors with many other plugins.

[zmzlois]

was thinking wrap federation under your own plugin and add a load()=>{} that does nothing to trick the AST re-parse