search

pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.13k stars 192 forks source link

Micro frontends and duplicate moduleId #664

Open jamime opened 2 years ago

jamime commented 2 years ago

In my micro frontend I have a html page with multiple scripts included. Each of these scripts are created by a different webpack config.

In development mode webpack uses the NamedModuleIdsPlugin. This generates module id's such as src/index.tsx. https://github.com/webpack/webpack/blob/9fcaa243573005d6fdece9a3f8d89a0e8b399613/lib/ids/NamedModuleIdsPlugin.js#L43

When I save either project, all instances of src/index.tsx are replaced with the same component. For example, I would end up with two applications instead of an application and a nav bar. Or I could end up with two nav bars.

I made a patch in NamedModuleIdsPlugin to prefix the uniqueName to the module Id.

(m) =>`${compiler.options.output.uniqueName}: ${getShortModuleName(m, context, root)}`,

Is this something that we could handle in react-refresh-webpack-plugin or would this be better to fix in webpack?

INCHMAN1901 commented 2 years ago

I think this is a webpack related issue. Normally modules from different webpack runtimes shouldn't interfere with each other. Did all your projects have the same name in package.json?

jamime commented 1 year ago

Did all your projects have the same name in package.json?

Different project name but same file name.