Experimental typescript decorator support

[pi0]

ESBuild seems planning to support decorators (evanw/esbuild#104) but it is not landed as the spec is experimental itself.

We shall use SWC to have experimental support for decorators (vitest-dev/vitest#708 (comment)).

Related feature request for server part (nitro): unjs/nitro#273

[darthf1]

Hi @pi0,

I currently have Nuxt 2 with Vitest and I am using decorators in my codebase. For Vitest, I've gotten decorator support via https://www.npmjs.com/package/rollup-plugin-swc3.

I have a WIP branch for the Nuxt 3 migration, however my issue is that no decorator metadata is emitted at all. What would be the current (RC12) workaround for getting decorators to work (in Nuxt 3 combined with Vitest)?

• I have a nuxt.config.ts and a vitest.config.ts. Are both still needed or can I replace vitest.config.ts with nuxt.config.ts => vitest.test: {} and is everything resolved equally?
• This comment mentions decorators should work out of the box, however my error is that no metadata is emitted.
• There is another thread about "unused" imports having their side-effects removed (specific to import 'reflect-metadata'), which could be why no metadata is emitted. However that fix does not seem to work anymore either (the hook nitro:rollup:before is also unavailable?). I tried via nuxt.config.ts => nitro.moduleSideEffects but that has no impact for me either.

It would be great if you could give some pointers on how to enable decorator support as a work around until there is official support, both for Nuxt 3 and testing with Vitest.

My tsconfig.json:

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

[darthf1]

Hi @pi0,

Would you be able to comment on this? I just rebased my WIP branch on Nuxt 3.2.3 and the issue remains the same. This is currently my last / only blocker to migrate from Nuxt 2 to Nuxt 3.

I tried replacing my swc solution with vite-plugin-babel but that introduced more issues than it solves. Probably misconfiguration on my part, but I was unable to resolve it.

[darthf1]

Ok, so in the end it apparently was not that hard, just unknown. TLDR; forget everything, just use @rollup/plugin-typescript:

vitest.config.ts (works on Vue 2.7 + Vite 4.1.4 + Vitest 0.29.2)

import typescript from '@rollup/plugin-typescript'
import vue from '@vitejs/plugin-vue2'
import { defineConfig } from 'vite'
import * as path from 'node:path'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  plugins: [typescript(), vue()],
  test: {
    ...
  },
})

nuxt.config.ts (Nuxt 3)

import typescript from '@rollup/plugin-typescript'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  ...

  // https://vitejs.dev/config/
  vite: {
    plugins: [typescript()],
  },
})

tsconfig.json

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

[misaon]

For me solution is (i need to use TypeOrm on server):

server/tsconfig.json

{
  "extends": "../.nuxt/tsconfig.server.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

nuxt.config.ts

import rollupPluginTs from '@rollup/plugin-typescript'

export default defineNuxtConfig({
  nitro: {
    rollupConfig: {
      plugins: [
        rollupPluginTs(
          {
            include: ['server/**/*.ts'],
            tsconfig: 'server/tsconfig.json'
          }
        )
      ]
    }
  }
})

and it works like charm!

[DevDengChao]

@misaon Hi, can you share an example repository? I have some vue-tsc errors when adding typeorm into my Nuxt project.

[jinusean]

I am getting a lot of warnings related to nuxt/nitro when I use @rollup/plugin-typescript.
Is there a way to turn them or fix it?

[DMaxter]

The solution that worked for me was to set experimentalDecorators directly in nuxt.config.ts:

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

[imcm7]

The solution that worked for me was to set experimentalDecorators directly in nuxt.config.ts:

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

That is not a problem for a while, the problem is that emitDecoratorMetadata not work and is need to use some additional plugins.

[Hibryda]

I also experienced issues while developing a module with decorators as class mixins introduce mess - in my case I consistently receive Reflect.metadata error. Tried to enable experimentalDecorators everywhere to no avail.

[alex-eliot]

Ok, so in the end it apparently was not that hard, just unknown. TLDR; forget everything, just use @rollup/plugin-typescript:

On a recent attempt with this on Nuxt 3.9.0, this solution seems to work for the dev preview, however it crashes when building for production. In the Vite config, setting esbuild to false makes the production build succeed again:

Note that I had to install tslib as well for the rollup plugin to work.

import typescript from '@rollup/plugin-typescript';

export default defineNuxtConfig({
  vite: {
    esbuild: false,
    plugins: [typescript()],
  },
});

But in turn this breaks typechecking (npx nuxi typecheck).
Also made a Stackblitz repro here: https://stackblitz.com/edit/github-mybirp-mjpsra

I do believe it is wise to just wait for ESBuild to support decorators instead of working it around.

I tried to debug the typechecking, and found out that TypeScript tries to throw this error: The runtime will invoke the decorator with 3 arguments, but the decorator expects 3.

Traced the part it tries to throw this error and, of course, it's the part where the decorator is used on a class method. The reason it crashes (instead of giving a type error) is because as a result of this error being attempted to be thrown, it cannot assert there's more than 3 arguments (after all, the error message is completely nonsensical in the first place).

[Minseok0917]

esbuild seems to be considering decorator

evanw/esbuild#104

[sanjacob]

What's the status on TypeScript 5.x decorator support?

[rodrigogs]

What a mess. Absolutely nothing worked for me.