I am trying implement micro-frontend using Nuxt3. To implement this, I have created a fresh app through below command
npx nuxi@latest init remote
Included vite module federation configs into nuxt.config.ts and exposing a component HelloWorld
components/HelloWorld.vue
<template>
<div>
<p>Hello, this is from remote app</p>
</div>
</template>
nuxt.config.ts
import federation from "@originjs/vite-plugin-federation";
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
experimental:{asyncEntry:true},
vite:{
plugins: [
federation({
name: 'remote',
filename: 'remoteEntry.js',
exposes: {
'./HelloWorld': './components/HelloWorld.vue',
}
})
]
}
})
But right after adding federation under plugins I get below error
ERROR Expression expected 1:42:15 PM
at getRollupError (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
at convertProgram (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/rollup/dist/es/shared/parseAst.js:1084:26)
at parseAst (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/rollup/dist/es/shared/parseAst.js:2069:87)
at TransformPluginContext.parse (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47296:12)
at TransformPluginContext.transform (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/@originjs/vite-plugin-federation/dist/index.mjs:1487:20)
at TransformPluginContext.transform (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/@originjs/vite-plugin-federation/dist/index.mjs:1790:74)
at /Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/vite-plugin-inspect/dist/index.mjs:1128:26
at plugin.<computed> (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/vite-plugin-inspect/dist/index.mjs:1115:14)
at /Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/vite-plugin-inspect/dist/index.mjs:1128:26
at plugin.<computed> (/Users/mdmanik/synergyforce/vue%20apps%20practice/newly-created/remote/node_modules/vite-plugin-inspect/dist/index.mjs:1115:14)
package.json file
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^3.15.2",
"vue": "^3.5.13"
},
"devDependencies": {
"@originjs/vite-plugin-federation": "^1.3.8"
}
}
Even If I don't expose any component, then also I get the same error just because of adding federation({}) under plugins. Note that, though there is an error, I can see the output in the browser, if I import the HelloWorld component into app.vue file.
Tried to integrate this app with my host application, but got the same error: Error Expression Expected.
Could you anyone please help me on this?