Nuxt3-RC8/RC10搭配Element-Plus打包后预览报错求助

错误1：RC8版本下@popperjs/core无default导出 #

该问题源于@popperjs/core v2采用纯ES模块规范，仅提供命名导出，但Element Plus部分组件在自动导入时尝试使用默认导入语法，导致模块解析冲突。

修复方案 #

在vite.plugins.AutoImport中添加Popper的导入映射，强制使用命名导入：

AutoImport({
  resolvers: [ElementPlusResolver()],
  // 手动映射Popper的导入方式
  imports: [
    {
      '@popperjs/core': [
        ['default', 'Popper'] // 将default导出映射为Popper命名变量
      ]
    }
  ]
}),

错误2：RC10版本下vue无default导出 #

Nuxt3 RC10及后续版本适配Vue 3的纯ES模块规范，Vue不再提供default导出。你的配置存在以下问题：

1. experimental.viteNode配置在新版本中易引发模块解析冲突
2. build.transpile的条件判断冗余，可能错误处理模块
3. 自动导入插件默认配置未适配Vue的ES模块导出规则

修复方案 #

1. 移除冗余实验性配置
   删除experimental中的viteNode: true，该配置在RC10后已不再推荐：

   experimental: {
     reactivityTransform: true,
     // 移除 viteNode: true
   },
   

2. 简化build.transpile配置
   直接指定需要转译的模块，去掉不必要的条件判断：

   build: {
     transpile: ['element-plus/es'],
   },
   

3. 适配AutoImport的Vue导出规则
   确保AutoImport对Vue的导入使用命名导出规范：

   AutoImport({
     resolvers: [ElementPlusResolver()],
     imports: [
       'vue',
       'nuxt/app'
     ],
     dts: true // 开启类型自动生成，避免类型报错
   }),
   

最终完整配置 #

import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
    '@unocss/nuxt',
    '@nuxtjs/color-mode',
  ],
  experimental: {
    reactivityTransform: true,
  },
  unocss: {
    preflight: true,
  },
  colorMode: {
    classSuffix: '',
  },
  hooks: {
    'vite:extendConfig': function (config: any, { isServer }: any) {
      if (isServer) {
        config.build.rollupOptions.output.inlineDynamicImports = true
      }
    },
  },
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
        imports: [
          'vue',
          'nuxt/app',
          {
            '@popperjs/core': [
              ['default', 'Popper']
            ]
          }
        ],
        dts: true
      }),
      Components({
        dts: true,
        resolvers: [ElementPlusResolver({ ssr: true })],
      }),
    ],
  },
  build: {
    transpile: ['element-plus/es'],
  },
})

额外注意事项 #

• 执行npm install/yarn install确保依赖版本匹配
• 清理缓存：删除.nuxt、node_modules/.cache目录后重新打包
• 确保Element Plus使用最新稳定版（建议^2.3.0及以上）

内容的提问来源于stack exchange，提问作者user20002299