module-federation / core

Module Federation is a concept that allows developers to share code and resources across multiple JavaScript applications
https://module-federation.io/
MIT License
1.27k stars 184 forks source link

Type file missing when using vue-tsc #2616

Open HUST-SE-LY opened 2 weeks ago

HUST-SE-LY commented 2 weeks ago

Describe the bug

The bug happened when I use webpack with module federation 2.0 to build my Vue App. When I run pnpm start in container folder, A type declaration file is missing from @mf-types.zip in the dist directory.

Then I read the source code, I find in packages/dts-plugin/src/core/lib/typeScriptCompiler.ts, function createHost rewrites the writeFile of typescript,but this looks useless under vue-tsc. Whether it is a component or a function, the following code doesn't seem to execute, and the target .d.ts file cannot be generated. By the way, in vue-tsc, sourceFile.fileName seems to be App.vue.ts, not App.vue, so the following code may be wrong.

// packages/dts-plugin/src/core/lib/typeScriptCompiler.ts
for (const sourceFile of sourceFiles || []) {
      const sourceEntry = mapExposeToEntry[normalize(sourceFile.fileName)];
      if (sourceEntry) {
        const mfeTypeEntry = join(
          mfTypePath,
          `${sourceEntry}${DEFINITION_FILE_EXTENSION}`,
        );
        const mfeTypeEntryDirectory = dirname(mfeTypeEntry);
        const relativePathToOutput = relative(mfeTypeEntryDirectory, filepath)
          .replace(DEFINITION_FILE_EXTENSION, '')
          .replace(STARTS_WITH_SLASH, '')
          .split(sep) // Windows platform-specific file system path fix
          .join('/');
        originalWriteFile(
          mfeTypeEntry,
          `export * from './${relativePathToOutput}';\nexport { default } from './${relativePathToOutput}';`,
          writeOrderByteMark,
        );
      }

Reproduction

https://github.com/HUST-SE-LY/mf-vue3-demo

Used Package Manager

pnpm

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 2.64 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.1 - ~/.nvm/versions/node/v18.20.1/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.1/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.4.1

Validations

ScriptedAlchemy commented 1 week ago

@2heal1 do you have any idea here why it is not detected?

WeetA34 commented 4 days ago

Hello,

i have a similar issue by using module federation quick start rsbuild example converted to vue3

2heal1 commented 3 days ago

let me check this

WeetA34 commented 3 days ago

as mentioned in issue 2685 HUST-SE-LY's comment , it works with latest vue-tsc 1.x (1.8.27). Regarding rsbuild, it doesn't provide vue-tsc by default for vue3 typescript projects as it uses tsc directly to build. So, it would be nice to get the types generated with tsc directly.

2heal1 commented 3 days ago

I find vue-tsc@1.7.0 will not use writeFile anymore , so this is the reason why our logic not work .

And the vue-tsc@<1.7.0 also has some questions , as @WeetA34 say , i will try tsc instead to see if it can work

2heal1 commented 3 days ago

I check again and find it can not use tsc to compile .vue file .

I will fix the issue by re-implement the ts compile.