typescript - class-transformer doesn't work. Invalid character: '@' - Stack Overflow

admin管理员组

文章数量:1391767

I'm a beginner with nuxt. I installed 'class-transformer' in Nuxt3 application. And I created Article.ts and used it in script block like below.

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>

But the following error occurred on the backend

2025-03-12 15:29:18  ERROR Invalid or unexpected token
2025-03-12 15:29:18 
2025-03-12 15:29:18     @__vite_ssr_import_2__.Expose()
2025-03-12 15:29:18     ^
2025-03-12 15:29:18     
2025-03-12 15:29:18     SyntaxError: Invalid or unexpected token
2025-03-12 15:29:18     at new Script (node:vm:117:7)
2025-03-12 15:29:18     at createScript (node:vm:269:10)
2025-03-12 15:29:18     at Object.runInThisContext (node:vm:317:10)
2025-03-12 15:29:18     at ViteNodeRunner.runModule (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:398:19)
2025-03-12 15:29:18     at ViteNodeRunner.directRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:381:16)
2025-03-12 15:29:18     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2025-03-12 15:29:18     at async ViteNodeRunner.cachedRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:206:14)
2025-03-12 15:29:18     at async ViteNodeRunner.dependencyRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:259:12)
2025-03-12 15:29:18     at async pages/index.vue:7:31
2025-03-12 15:29:18     at async ViteNodeRunner.runModule (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:399:5)
2025-03-12 15:29:18 
2025-03-12 15:29:18 
2025-03-12 15:29:18  WARN  [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in .

On the front end, the following another error was output:

[nuxt] error caught during app initialization
Error: Invalid character: '@'
H3Error — index.mjs:45
createError — index.mjs:71
createError — error.js:33
showError — error.js:9
runWithContext — runtime-core.esm-bundler.js:3996
run — reactivity.esm-bundler.js:77
（anonymous関数） — router.js:213

My nuxt.config.ts and package.json are below.

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',
    }
  }
})

{
  "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": "/@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"
  }
}

I have no idea to fix it. Can someone please help me?

I assumed Nuxt was not recognizing the annotations. To make Nuxt aware of annotations, I installed reflect-metadata and es6-shim. In Addition, I added the following settings to nuxt.config.ts.

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

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

And I add import 'reflect-metadata'; import 'es6-shim'; to Article.ts.

import 'reflect-metadata';
import 'es6-shim';
import { Expose　} from "class-transformer";

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

  @Expose()
  public title: string;

  @Expose()
  public body: string;
}

But I couldn't resolve it.

I'm a beginner with nuxt. I installed 'class-transformer' in Nuxt3 application. And I created Article.ts and used it in script block like below.

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>

But the following error occurred on the backend

2025-03-12 15:29:18  ERROR Invalid or unexpected token
2025-03-12 15:29:18 
2025-03-12 15:29:18     @__vite_ssr_import_2__.Expose()
2025-03-12 15:29:18     ^
2025-03-12 15:29:18     
2025-03-12 15:29:18     SyntaxError: Invalid or unexpected token
2025-03-12 15:29:18     at new Script (node:vm:117:7)
2025-03-12 15:29:18     at createScript (node:vm:269:10)
2025-03-12 15:29:18     at Object.runInThisContext (node:vm:317:10)
2025-03-12 15:29:18     at ViteNodeRunner.runModule (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:398:19)
2025-03-12 15:29:18     at ViteNodeRunner.directRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:381:16)
2025-03-12 15:29:18     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2025-03-12 15:29:18     at async ViteNodeRunner.cachedRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:206:14)
2025-03-12 15:29:18     at async ViteNodeRunner.dependencyRequest (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:259:12)
2025-03-12 15:29:18     at async pages/index.vue:7:31
2025-03-12 15:29:18     at async ViteNodeRunner.runModule (node_modules/@nuxt/vite-builder/node_modules/vite-node/dist/client.mjs:399:5)
2025-03-12 15:29:18 
2025-03-12 15:29:18 
2025-03-12 15:29:18  WARN  [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt/docs/api/composables/use-nuxt-app#payload.

On the front end, the following another error was output:

[nuxt] error caught during app initialization
Error: Invalid character: '@'
H3Error — index.mjs:45
createError — index.mjs:71
createError — error.js:33
showError — error.js:9
runWithContext — runtime-core.esm-bundler.js:3996
run — reactivity.esm-bundler.js:77
（anonymous関数） — router.js:213

My nuxt.config.ts and package.json are below.

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',
    }
  }
})

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

I have no idea to fix it. Can someone please help me?

I assumed Nuxt was not recognizing the annotations. To make Nuxt aware of annotations, I installed reflect-metadata and es6-shim. In Addition, I added the following settings to nuxt.config.ts.

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

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

And I add import 'reflect-metadata'; import 'es6-shim'; to Article.ts.

import 'reflect-metadata';
import 'es6-shim';
import { Expose　} from "class-transformer";

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

  @Expose()
  public title: string;

  @Expose()
  public body: string;
}

But I couldn't resolve it.

• typescript
• nuxt.js
• class-transformer

Share Improve this question Follow edited Mar 12 at 7:31 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Mar 12 at 7:28 CielCiel 1111 bronze badge 2

• Did you include the experimentalDecorators field in your TypeScript configuration file, as demonstrated in this answer? – yuanyxh Commented Mar 12 at 7:53
• Your comment was a hint and I was able to solve the problem. Thank you very much. – Ciel Commented Mar 13 at 6:00

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I resolved it to add this configuration to nuxt.config.ts.

  vite: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true,
          emitDecoratorMetadata: true
        }
      }
    }
  },

The following nuxt.confing.ts settings I tried before asking the question and import 'reflect-metadata' and import 'es6-shim' statement specified in Article.ts do not seem to be necessary.

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

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

本文标签： typescriptclasstransformer doesn39t work Invalid character 3939Stack Overflow