originjs / vite-plugin-federation

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

Host app's script not running with vue3. #638

Open dante01yoon opened 1 week ago

dante01yoon commented 1 week ago

scripts are not running after build with plugins.

even I put console.log very top of file, console.log not called.

import { i as importShared, getCurrentScope as getCurrentScope$1, onScopeDispose, onMounted as onMounted$2, nextTick, unref, getCurrentInstance as getCurrentInstance$1, isRef, ref as ref$4, readonly, watch, toRef as toRef$1, customRef as customRef$1, c as createWebHistory } from './__federation_shared_vue.js';

this is because above import statement. Why is this happens and how I work around?

host

federation({
        name: 'hostApp',
        filename: 'remoteEntry.js',
        remotes: {
          '@my/remote-service1': 'localhost:3001/assets/remoteEntry.js',
        },
        exposes: {
          './Badge': './src/components/Badge.vue',
        },
        shared: ['vue', 'pinia', 'vue-router', 'vue-query', 'vue-i18n'],
      }),

build.target is 'esnext'

because of chunk file not executed at all, app not run. <div id="app"></div>

my network tab 스크린샷 2024-11-08 오후 8 16 22

if my host app run with pnpm dev, it runs.

nothing special of my main.ts or App.vue

import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();

app
  .use(i18n)
  .use(pinia)
  .use(router);

app
  .mount('#app');

Versions

Reproduction

Additional Details

Steps to reproduce

What is Expected?

What is actually happening?

dante01yoon commented 4 days ago

Anyone who face same issue, commented out 'manualChunk' option in your rollup config in vite.config.ts

build {
  rollupOptions: {
        output: {
          // manualChunks: {  
          //   vue: ['vue', 'vue-router', 'pinia'],
          // },
        },
        external: ['@floating-ui/vue'],
      },
}