vite-plugin-federation
vite-plugin-federation copied to clipboard
originjs
[Vite] Typescript build
When I run host in dev mode all works fine, but when I try to build got an error
npm run build
> [email protected] 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! [email protected] build: `vue-tsc --noEmit && vite build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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
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?
You can add declarations in the d.ts file, like this
declare module "router-remote/*"{}
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?)
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?
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
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
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://................'
},
...
})
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
Yeah @ruleeeer i have this, look:
Also, i've follow the example for sure, the only difference is that i have to use TS
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?
@schirrel I tried to build using your branch, but I wasn't able to reproduce your problem
here are my two guesses
- I see that you uploaded yarn.lock, maybe it is caused by different build tools? Because
vite-plugin-federationusespnpm workspaceto manage the example project, can you usepnpmto rebuild it? - Could you first try running
pnpm buildinvite-plugin-federationfolder to re-build the plugin? I'm not sure if it's because your localvite-plugin-federationversion is too low(Of course I think this possibility is relatively small)
@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
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
@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.
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
@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