v1.0.0: error in shared dependencies ending with "/"

[husayt]

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/": {  },
...
}

[zhangHongEn]

I am not familiar with this feature, it can be added to the roadmap

[zhangHongEn]

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.

[husayt]

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 there any update?

[husayt]

@smelukov is it not fixed for you? I thought previous version had a fix. Can you try latest, please

[zhangHongEn]

This feature will start to be developed recently

[smelukov]

@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.

[smelukov]

Still actual problem

[zhangHongEn]

I've been too busy recently, so I'll prioritize it this weekend.

[zhangHongEn]

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.

[zhangHongEn]

@smelukov Before completion, you can manually specify the shared module

shared: {
"react-dom/client": {},
"moduleA/path1/path2": {}
}

[hi-ogawa]

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,

[zhangHongEn]

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: ***@***.***>

[zhangHongEn]

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]

@hi-ogawa I wrote a reproducible example

rollup

vite

[hi-ogawa]

@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]

@hi-ogawa This works, I'll do it this way first, thanks for your help

[gioboa]

Closed by #67

[smelukov]

@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)

[smelukov]

@gioboa can we reopen the issue?

[zhangHongEn]

@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 thanks!
We use lerna with useNx: true

[husayt]

@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.

[zhangHongEn]

Yes, currently we rely entirely on examples to ensure quality, which is very important now.

[zhangHongEn]

@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?

[smelukov]

@zhangHongEn here is an example https://github.com/smelukov/mf-vite-nx-bug

npm i
npm start

[zhangHongEn]

@smelukov Fixed, nx demo is running normally

[gioboa]

Thanks @zhangHongEn

[smelukov]

@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

[gioboa]

@smelukov can you create a new issue for this with a basic reproduction repository please?

[smelukov]

@gioboa This error is about a feature that was implemented for this issue. Should I create a new issue anyway?

[gioboa]

If I understand the problem correctly, now you have
No loader is configured for ".ttf" files: ../../node_modules/out-uikit-library/lib/styles/fonts/Inter-Bold.ttf so should be a different one.