admin管理员组

文章数量:1026989

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"
  }
}

  1. 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.

  2. 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?

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"
  }
}

  1. 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.

  2. 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?

本文标签：

版权声明：本文标题：vuejs3 - ERROR Expression expected, failing to implement micro-frontend using Vue3, Nuxt3, Vite - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1742079337a1910011.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。