vite
vite copied to clipboard
module-federation
v1.0.0: error in shared dependencies ending with "/"
Some examples show using dependencies ending with /, but when I try the same here I get error:
error when starting dev server:
Error: Missing "./" specifier in "react" package
when
shared: {
react: { },
"react/": { },
...
}
If there is a document, please send it to me. I seem to have missed the document and did not see the function of this feature.
you can see that in official next-js MF examples
https://github.com/module-federation/core/blob/60be41eccf8cd6481e0aa7b633b095f60dfa2166/packages/nextjs-mf/README.md?plain=1#L84
@smelukov is it not fixed for you? I thought previous version had a fix. Can you try latest, please
@smelukov is it not fixed for you? I thought previous version had a fix. Can you try latest, please
Nope, on 1.0.0-alpha-51eeeb6 it still doesn't work.
vite modulePreload will bring "shared module" forward and execute it before init. I can't disable this behavior. The difficulties have been solved and I can implement it, but work has taken up all my time recently.
@smelukov Before completion, you can manually specify the shared module
shared: {
"react-dom/client": {},
"moduleA/path1/path2": {}
}
vite modulePreload will bring "shared module" forward and execute it before init. I can't disable this behavior.
@zhangHongEn This looks like Rollup's output.hoistTransitiveImports https://rollupjs.org/configuration-options/#output-hoisttransitiveimports Can you try disabling it from build.rollupOptions.output.hoistTransitiveImports?
EDIT: Actually I'm not sure changing this should matter since Rollup says https://rollupjs.org/faqs/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting
This does not affect code execution order or behaviour,
My external is a dynamic import, but it has been modified to synchronous import. I will provide an example this afternoon
---- Replied Message ---- | From | Hiroshi @.> | | Date | 08/26/2024 07:58 | | To | module-federation/vite @.> | | Cc | zhn @.>, Mention @.> | | Subject | Re: [module-federation/vite] v1.0.0: error in shared dependencies ending with "/" (Issue #40) |
vite modulePreload will bring "shared module" forward and execute it before init. I can't disable this behavior.
@zhangHongEn This looks like Rollup's output.hoistTransitiveImportshttps://rollupjs.org/configuration-options/#output-hoisttransitiveimports Can you try disabling it?
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
Thank you for your help. Disabling hoistTransitiveImports has not taken effect
---- Replied Message ---- | From | Hiroshi @.> | | Date | 08/26/2024 07:58 | | To | module-federation/vite @.> | | Cc | zhn @.>, Mention @.> | | Subject | Re: [module-federation/vite] v1.0.0: error in shared dependencies ending with "/" (Issue #40) |
vite modulePreload will bring "shared module" forward and execute it before init. I can't disable this behavior.
@zhangHongEn This looks like Rollup's output.hoistTransitiveImportshttps://rollupjs.org/configuration-options/#output-hoisttransitiveimports Can you try disabling it?
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
@zhangHongEn Thanks for the reproduction. I'm not sure if this is technically a bug of Vite. It looks like this is a issue/limitation of manualChunks in general.
In your reproduction, you can mitigate the issue of __vitePreload creeping into a random chunk by forcing it to be inside a dedicated chunk:
manualChunks(id) {
...
// force a dedicated chunk for `__vitePreload` helper
// since Vite/Rollup doesn't guarantee which chunk this module gets merged into.
// https://github.com/vitejs/vite/blob/dbd6214f6fa5d35647cbd00580c76788ce894e9e/packages/vite/src/node/plugins/importAnalysisBuild.ts#L198-L208
if (id.includes('/preload-helper.js')) {
return "preload-helper"
}
}
@zhangHongEn the last update broke our project :(
We have lerna monorepo with this structure:
- apps/host/vite.config.ts
- apps/host/...
- apps/remote1/vite.config.ts
- apps/remote1/...
- apps/remote2/vite.config.ts
- apps/remote2/...
failed to load config from /Users/user/project/apps/host/vite.config.ts
error when starting dev server:
Error: ENOENT: no such file or directory, open '/Users/user/project/apps/host/node_modules/__mf__virtual/empty.js'
at Object.openSync (node:fs:600:3)
at Object.writeFileSync (node:fs:2221:35)
at Object.<anonymous> (/Users/user/project/node_modules/@module-federation/vite/lib/index.cjs:317:4)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
@zhangHongEn the last update broke our project :(
We have lerna monorepo with this structure:
- apps/host/vite.config.ts
- apps/host/...
- apps/remote1/vite.config.ts
- apps/remote1/...
- apps/remote2/vite.config.ts
- apps/remote2/...
failed to load config from /Users/user/project/apps/host/vite.config.ts error when starting dev server: Error: ENOENT: no such file or directory, open '/Users/user/project/apps/host/node_modules/__mf__virtual/empty.js' at Object.openSync (node:fs:600:3) at Object.writeFileSync (node:fs:2221:35) at Object.<anonymous> (/Users/user/project/node_modules/@module-federation/vite/lib/index.cjs:317:4) at Module._compile (node:internal/modules/cjs/loader:1218:14) at Module._extensions..js (node:internal/modules/cjs/loader:1272:10) at Module.load (node:internal/modules/cjs/loader:1081:32) at Module._load (node:internal/modules/cjs/loader:922:12) at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Ok maybe it's incompatible with lerna monorepo, I'll fix it
@smelukov @zhangHongEn @gioboa as we are moving forward it is important to make sure while fixing issues and adding new features we don't introduce regressions, as this is causing a lot of pain to end users. That was one of the reasons I tried to add examples with main features to make sure we can run them to see visually if anything affected. Moving forward will be great to add more examples like that, which could be our first line of defence, but also might be useful to think about integration and unit tests which could help to prevent as well. We might open a new ticket here to discuss ideas and suggestions for this.
Yes, currently we rely entirely on examples to ensure quality, which is very important now.
@smelukov I may know where there is a problem with the path setting, but I tried to use learn and failed to reproduce it. Can you provide more information and an example?
@zhangHongEn here is an example https://github.com/smelukov/mf-vite-nx-bug
npm i
npm start
@zhangHongEn @gioboa our project is still broken :( Another errors at this time:
✘ [ERROR] No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Bold.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:34:11:
34 │ src: url('fonts/Inter-Bold.ttf');
╵ ~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/PTMono-Regular.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:49:11:
49 │ src: url('fonts/PTMono-Regular.ttf');
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
4:33:52 PM [vite] error while updating dependencies:
Error: Build failed with 11 errors:
../../node_modules/out-uikit-library/lib/styles/fonts.css:4:11: ERROR: No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Thin.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:9:11: ERROR: No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-ExtraLight.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:14:11: ERROR: No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Light.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:19:11: ERROR: No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Regular.ttf
../../node_modules/out-uikit-library/lib/styles/fonts.css:24:11: ERROR: No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Medium.ttf
...
at failureErrorWithLog (/path/to/project/node_modules/esbuild/lib/main.js:1472:15)
at /path/to/project/node_modules/esbuild/lib/main.js:945:25
at /path/to/project/node_modules/esbuild/lib/main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
We do not have this error if we use the module federation plugin for webpack. Moreover, we use cssinjs and our project does not import any CSS files. In this case, we see how something imports a CSS file and this CSS file imports some fonts. This is unexpected behaviour
PS: we use out-uikit-library as in shared with trailing /
Seems like trailing / forces vite to import all of the modules in shared package, even not imported by the project
@smelukov can you create a new issue for this with a basic reproduction repository please?