[Vite] Typescript build about vite-plugin-federation HOT 16 OPEN

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

declare module "router-remote/*"{}

from vite-plugin-federation.

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?

from vite-plugin-federation.

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

from vite-plugin-federation.

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?

from vite-plugin-federation.

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

from vite-plugin-federation.

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

from vite-plugin-federation.

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://................'
      },
       ...
    })

from vite-plugin-federation.

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

from vite-plugin-federation.

Yeah @ruleeeer i have this, look:

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

from vite-plugin-federation.

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?

from vite-plugin-federation.

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

from vite-plugin-federation.

@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

from vite-plugin-federation.

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

from vite-plugin-federation.

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

from vite-plugin-federation.

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 [email protected]: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/[email protected] 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

> [email protected] 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

from vite-plugin-federation.

@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

from vite-plugin-federation.