originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.4k stars 242 forks source link

Getting error while using laravel vue 3 #632

Closed annaselh closed 2 months ago

annaselh commented 2 months ago

Hi, I'm using module federation with vue 3 as remote and vue 3 (with laravel) as the host, but while the host access the remote component I get error like this

TypeError: Failed to resolve module specifier '__laravel_vite_placeholder__/node_modules/.vite/deps/vue.js?v=5d8d6ebd' at get (__x00__virtual:__federation__:14:36) at Object.get (__x00__virtual:__federation__:23:30) at we (__federation_fn_import-a6fff6c2.js:1:4445) at Ce (__federation_fn_import-a6fff6c2.js:1:3996) at __federation_expose_TestComponent-af96f67a.js:1:100

my vite configuration in remote is:

federation({ name: 'remote-app', filename: 'remoteEntry.js', exposes: { './TestComponent': 'src/components/TestComponent.vue', './TestPage': 'src/pages/TestPage.vue' }, shared: ['vue'], }),

and my vite configuration in my host:

federation({ name: 'host-app', remotes: { remote_app: 'http://remote-app.local/assets/remoteEntry.js', }, filename: 'remoteEntry.js', exposes: { }, shared: ['vue'], }),

and I access the component in host page like this:

`<script setup lang="ts">

import TestComponent from 'remote_app/TestComponent'

`

I hope you can help me with that issue, Thank you.

SkyWalker653 commented 2 months ago

It looks like there might be a typo in the import statement. It should be:

import TestComponent from 'remote-app/TestComponent';
annaselh commented 2 months ago

It looks like there might be a typo in the import statement. It should be:

import TestComponent from 'remote-app/TestComponent';

It still not working.

I think it because laravel-vite cannot read path from the url. I try build the remote and the host then it's working fine.

Maybe while using laravel-vue, it must build first and cannot run in development npm run dev