Micro frontends and duplicate moduleId

[jamime]

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]

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]

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

Different project name but same file name.