[Vite] Typescript build

[imkarmadev]

When I run host in dev mode all works fine, but when I try to build got an error

 npm run build

> stargate@0.0.0 build /home/imkarma/Projects/galileo/packages/stargate
> vue-tsc --noEmit && vite build

src/App.vue:7:16 - error TS2307: Cannot find module 'router-remote/HelloWorld' or its corresponding type declarations.

7   () => import("router-remote/HelloWorld")
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! stargate@0.0.0 build: `vue-tsc --noEmit && vite build`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the stargate@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/imkarma/.npm/_logs/2022-02-22T14_46_50_721Z-debug.log

Vue3 + Vite + TypeScript

[flyfishzy]

Could you provide a reproduction repo? I think it may have something to do with vue-tsc. Try adding a module declaration in .d.ts?

[ruleeeer]

You can add declarations in the d.ts file, like this

declare module "router-remote/*"{}

[imkarmadev]

You can add declarations in the d.ts file, like this

declare module "router-remote/*"{}

yes, this solution will work, but do we have some options to do this auto?)

[ruleeeer]

You can add declarations in the d.ts file, like this

declare module "router-remote/*"{}

yes, this solution will work, but do we have some options to do this auto?)

I haven't found a better way than this, as I see some other frameworks (like vue) also need to add definitions in d.ts to pass TS compilation, do you have any good suggestions?

[GOGOGOSIR]

You can add declarations in the d.ts file, like this

declare module "router-remote/*"{}

yes, this solution will work, but do we have some options to do this auto?)

I haven't found a better way than this, as I see some other frameworks (like vue) also need to add definitions in d.ts to pass TS compilation, do you have any good suggestions?

If you use vite --mode customMode When packaging, it will still prompt that the module cannot be found, but it is normal to use --mode production

[schirrel]

This doesnot worked for me :( i have the same issue but on vue2 project.

At left: module ts config declarations .d.ts

At right root ts config

bottom: terminal error

[ruleeeer]

This doesnot worked for me :( i have the same issue but on vue2 project.

At left: module ts config declarations .d.ts

At right root ts config

bottom: terminal error

It seems that this is not the problem caused by TS, because the error comes from vite. Is there a configuration like the following in your vite configuration file?

federation({
       ...
      remotes: {
        landing: 'http://................'
      },
       ...
    })

[ruleeeer]

This doesnot worked for me :( i have the same issue but on vue2 project. At left: module ts config declarations .d.ts At right root ts config bottom: terminal error

It seems that this is not the problem caused by TS, because the error comes from vite. Is there a configuration like the following in your vite configuration file?

federation({
       ...
      remotes: {
        landing: 'http://................'
      },
       ...
    })

Here's a simple vue2 project for reference : https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue2-demo

[schirrel]

Yeah @ruleeeer i have this, look:

Also, i've follow the example for sure, the only difference is that i have to use TS

[schirrel]

I've take the vue2 example and converted the host to TS at this branch , but keeps giving error.

COuld you help and take a look if i am missing anything @ruleeeer, please?

[ruleeeer]

@schirrel I tried to build using your branch, but I wasn't able to reproduce your problem

---

here are my two guesses

1. I see that you uploaded yarn.lock, maybe it is caused by different build tools? Because vite-plugin-federation uses pnpm workspace to manage the example project, can you use pnpm to rebuild it?
2. Could you first try running pnpm build in vite-plugin-federation folder to re-build the plugin? I'm not sure if it's because your local vite-plugin-federation version is too low(Of course I think this possibility is relatively small)

[ruleeeer]

@schirrel

I found that we are using different versions of vite, I tried to upgrade to your version (v2.8.6) and still couldn't reproduce your problem

[schirrel]

HI @ruleeeer thanks for the return. Unfortunatelly i am off the city the weekend, but monday first time i will work on it. also i will take a look at what you said about pnpm and vite version, thanks a lot

[schirrel]

@ruleeeer i've tried to use pnpm but i getting error when build:

I've run pnpm build on root, and also at packages/lib but when i try to build the folder i got this.

[ruleeeer]

Hi @schirrel ,i'm sorry I can't reproduce your question, because I don't know what happened, I can only record all my operation process, pray this will be helpful to you

❯ git clone git@github.com:schirrel/vite-plugin-federation.git
  Cloning into 'vite-plugin-federation'...
  remote: Enumerating objects: 2416, done.
  remote: Counting objects: 100% (1496/1496), done.
  remote: Compressing objects: 100% (917/917), done.
  remote: Total 2416 (delta 891), reused 1049 (delta 550), pack-reused 920
  Receiving objects: 100% (2416/2416), 1.42 MiB | 1.53 MiB/s, done.
  Resolving deltas: 100% (1349/1349), done.
❯ cd vite-plugin-federation
❯ git checkout feat/typescript-demo
❯ pnpm install
❯ pnpm build

> vite-plugin-federation@ build /Users/ruleeeer/Projects/Temp/vite-plugin-federation
> cd packages/lib && pnpm build

> @originjs/vite-plugin-federation@1.1.1 build /Users/ruleeeer/Projects/Temp/vite-plugin-federation/packages/lib
> rollup -c

src/utils/semver/index.ts → dist/satisfy.js...
created dist/satisfy.js in 1.6s

src/index.ts → dist/index.js, dist/index.es.js...
created dist/index.js, dist/index.es.js in 1.2s

❯ cd packages/examples/typescript-demo
❯ pnpm build
// There will be an error，rerun pnpm install is fine because of the conflict with `vue3` dependency

❯ pnpm install
❯ pnpm build

> typescript-demo@1.0.0 build /Users/ruleeeer/Projects/Temp/vite-plugin-federation/packages/examples/typescript-demo
> pnpm run build -r --filter ./

Scope: 3 of 46 workspace projects
host-simple build$ vite build
│ vite v2.6.14 building for production...
│ transforming...
│ ✓ 19 modules transformed.
│ rendering chunks...
│ dist/index.html                          0.48 KiB
│ dist/assets/Button.3877b2ef.js           1.01 KiB / gzip: 0.54 KiB
│ dist/assets/index.c3cb1777.css           0.34 KiB / gzip: 0.23 KiB
│ dist/assets/index.47f57086.js            9.64 KiB / gzip: 3.07 KiB
│ dist/assets/Button.2811a4cf.css          0.20 KiB / gzip: 0.17 KiB
│ dist/assets/__federation_shared_vue.js   192.62 KiB / gzip: 53.63 KiB
└─ Done in 1.3s
remote-simple build$ vite build
[7 lines collapsed]
│ dist/assets/__federation_lib_semver.js                               10.83 KiB / gzip: 2.19 KiB
│ dist/assets/__federation_expose_Remote-simple-section.js             1.00 KiB / gzip: 0.50 KiB
│ dist/assets/__federation_expose_Remote-simple-button.js              1.03 KiB / gzip: 0.52 KiB
│ dist/assets/index.850d67bc.js                                        2.28 KiB / gzip: 0.94 KiB
│ dist/assets/preload-helper.84e05406.js                               0.95 KiB / gzip: 0.47 KiB
│ dist/assets/vueComponentNormalizer.6cdc1a23.js                       1.71 KiB / gzip: 0.61 KiB
│ dist/assets/index.dcc522db.css                                       0.20 KiB / gzip: 0.16 KiB
│ dist/assets/__federation_expose_Remote-simple-section.7724eea1.css   0.12 KiB / gzip: 0.10 KiB
│ dist/assets/__federation_expose_Remote-simple-button.552a0d2e.css    0.20 KiB / gzip: 0.17 KiB
│ dist/assets/__federation_shared_vue.js                               144.54 KiB / gzip: 34.73 KiB
└─ Done in 1.3s

[ruleeeer]

@schirrel And some final attempts I need to pnpm install again before pnpm build, because the vue2 dependency conflicts with vue3, otherwise I get an error on my machine when pnpm build

cd typescript-demo
pnpm install
pnpm build

---

Or change "@originjs/vite-plugin-federation": "workspace:*" to "@originjs/vite-plugin-federation": "1.1.2" under the typescript-demo folder package.json ,retry