Nuxt3使用class-transformer报错：无效字符'@'求助

问题描述 #

在Nuxt3项目中使用class-transformer的@Expose装饰器时，后端报"Invalid or unexpected token"（指向@Expose()），前端初始化时捕获到"Invalid character: '@'"错误。

相关代码 #

Article.ts

import { Expose } from "class-transformer";

export class Article {
  @Expose()
  public id: number;

  @Expose()
  public title: string;

  @Expose()
  public body: string;
}

组件代码

<script setup lang="ts">
import { plainToInstance } from "class-transformer";
import { Article } from '../models/Article';

const articleList = ref<Article[]>([]);

const data = [
{
  id: 1,
  title: 'title1',
  body: 'body1',
},
{
  id: 2,
  title: 'title2',
  body: 'body2',
}];

articleList.value = plainToInstance(Article, data);
</script>

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',

  devtools: { enabled: true },

  build: {
    transpile: ['vue', 'class-transformer', 'reflect-metadata', 'es6-shim'],
  },

  vite: {
    optimizeDeps: {
      include: ['reflect-metadata', 'class-transformer', 'es6-shim']
    }
  },

  css: [
    '~/assets/css/style.css',
    'semantic-ui-css/semantic.min.css',
  ],

  modules: [
    '@sidebase/nuxt-auth',
  ],

  auth: {
    globalAppMiddleware: true,
    provider: {
      type: 'authjs',
    }
  }
})

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "test": "vitest",
    "test:watch": "vitest --watch"
  },
  "dependencies": {
    "@prisma/client": "^6.1.0",
    "@sidebase/nuxt-auth": "https://pkg.pr.new/@sidebase/nuxt-auth@985",
    "bcrypt": "^5.1.1",
    "class-transformer": "^0.5.1",
    "dotenv": "^16.4.7",
    "es6-shim": "^0.35.8",
    "ioredis": "^5.4.2",
    "next-auth": "~4.21.1",
    "nuxt": "^3.14.1592",
    "reflect-metadata": "^0.2.2",
    "semantic-ui-css": "^2.5.0",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxt/test-utils": "^3.17.0",
    "@testing-library/vue": "^8.1.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitest/coverage-v8": "^3.0.7",
    "@vue/test-utils": "^2.4.6",
    "happy-dom": "^17.1.8",
    "jsdom": "^26.0.0",
    "typescript": "^5.8.2",
    "vitest": "^3.0.7"
  }
}

已尝试的操作 #

• 安装reflect-metadata和es6-shim
• 在nuxt.config.ts中配置build.transpile和vite.optimizeDeps.include包含相关依赖
• 在Article.ts中引入reflect-metadata

但问题仍未解决，需要帮助。

解决方案 #

1. 配置TypeScript支持装饰器 #

在项目根目录的tsconfig.json中添加或修改以下配置：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

2. 全局引入reflect-metadata #

创建Nuxt插件文件plugins/reflect-metadata.ts，内容如下：

import 'reflect-metadata'

在nuxt.config.ts中注册该插件：

export default defineNuxtConfig({
  // ...其他原有配置
  plugins: [
    '~/plugins/reflect-metadata.ts'
  ]
})

3. 调整构建转译配置 #

修改nuxt.config.ts中的build.transpile，确保包含使用装饰器的代码目录：

export default defineNuxtConfig({
  build: {
    transpile: ['class-transformer', 'reflect-metadata', '~/models/**/*.ts']
  }
})

4. 增强Vite装饰器支持（可选） #

如果上述步骤无效，在nuxt.config.ts的Vite配置中直接指定TypeScript装饰器选项：

export default defineNuxtConfig({
  vite: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true,
          emitDecoratorMetadata: true
        }
      }
    }
  }
})

验证步骤 #

1. 停止当前Nuxt开发服务器
2. 执行npm run dev重启服务
3. 检查应用是否还存在装饰器语法错误

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