eleni
Buiding app with @originjs/vite-plugin-federation
I have a Nuxt 3 micro app that I am trying to build using the nuxt config below. When I add the shared inside vite and do 'npm run build', I get the error:
ERROR Nuxt Build Error: [vite]: Rollup failed to resolve import "federation_fn_satisfy" from "virtual:federation_fn_import".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
my nuxt config js:
import federation from '@originjs/vite-plugin-federation';
export default defineNuxtConfig({
app: {
baseURL: '/',
},
build: {
publicPath: '/',
},
runtimeConfig: {
public: {
API_URL: process.env.API_URL
}
},
ssr: false,
vite: {
plugins: [
federation({
name: 'test',
filename: 'remoteEntry.js',
exposes: {
'./App': './pages/user-management/index.vue',
'./Router': './router/index.js',
'./Sidebar': './components/Sidebar.vue',
},
shared: {
vue: {
singleton: true,
requiredVersion: '^3.2.0', // Ensure shared Vue compatibility
},
},
remotes: {
main:
${process.env.APP_BASE_URL}/remoteEntry.js,
},
styles: {
injectTo: 'head',
},
publicPath: '/',
}),
],
build: {
target: 'esnext',
},
server: {
fs: {
allow: ['..'],
},
},
},
nitro: {
preset: 'static',
},
});5 replies
Nuxt 3 microfrontend integration
I have a Nuxt 3 base app and a Nuxt 3 micro app and I am using "@originjs/vite-plugin-federation". I have imported and loaded the micro app in the base app successfully. The only problem I have is that any component that is using slots, templates or any dynamic content, is not visible. No error is thrown though.
If I use static data and not slots or templates, everything loads perfectly.
9 replies