Typescript 5 decorators do not build

[austinlogo]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:46 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6020
    Binaries:
      Node: 19.7.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

SWC transpilation

Link to the code that reproduces this issue

https://github.com/austinlogo/nextjs-typescript-5

To Reproduce

Install and build as normal you should see an error in building types.

When you use the experimental flags in the tsconfig.json

Describe the Bug

This build Error

./src/pages/api/hello.ts
Error:
  × Unexpected token `@`. Expected identifier, string literal, numeric literal or [ for the computed key
    ╭─[/Users/logo/workspaces/scratch/ts5/test-types/src/pages/api/hello.ts:23:1]
 23 │ }
 24 │
 25 │ class Test {
 26 │   @loggedMethod
    ·   ─
 27 │   myMethod() {
 28 │     return "hello";
 29 │   }
    ╰────

Expected Behavior

I would expect it to build.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1559

[nandorojo]

Same with function f<const T>() {} generics not working.

[Frikki]

@nandorojo Please open a different issue after verifying that nobody hasn’t already reported the issue.

[nandorojo]

Fair suggestion, however, I think it’s under the same umbrella issue: TS 5 features not being supported. My guess is all syntax gets supported together by upgrading the TS version Next (or SWC) uses.

[pokatomnik]

This is SWC-only issue. Fortunately, NextJS allows to switch back to the original TSC instead of SWC. I tried It, and It IS working right now. My advice: use TSC. This is the only fully-functional TS compiler right now.

[nandorojo]

Oh, good to know. What did you do exactly?

[pokatomnik]

Oh, good to know. What did you do exactly?

1. Install ts-loader
2. Configure your next.config.js like this:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx?$/,
      use: [
        {
          loader: "ts-loader",
          options: { transpileOnly: true },
        },
      ],
    });

    return config;
  },
};

3. try to run npm start dev

You may notice there will be some errors in the console (ts-loader cannot handle some imports located in the newly created app). Remove them or try to solve those errors by yourself.

[runjuu]

Another way to quickly fix this issue, without waiting for NextJS to update, is to use patch-package or pnpm patch to directly enable SWC's stage 3 decorator support.

An example of how to use pnpm patch to enable this can be found at https://github.com/orch-js/orch-js/commit/47b28ee29fad3ebf688fd56cfe5c96aaac3e1c28. Just simply mark decorators as true and specify the decoratorVersion to 2022-03.

[yanickrochon]

I have a library using TypeScript 5, nothing special with the tsconfig.json. This library is built, imported in the Next application, and it fails.

If the above solution works, it should be added to Next's configuration; opt-in to enable TS decorators.

[Traveller23]

Next.js is now at version 14.1.0, and this issue has not yet been officially resolved (though thanks to @runjuu for the solution).

[imqdee]

Next.js is now at version 14.2.3, and this issue has not yet been officially resolved. Give us the ability to use decorators.

[dartess]

Hello @kdy1, I see you self-assigned this almost half a year ago. Please share, is there any news or ETA?

[sawich]

Status? 👀

[kdy1]

https://github.com/vercel/next.js/pull/65963

[tomas-c]

@kdy1 I see https://github.com/vercel/next.js/pull/65963 was closed until the support is implemented in SWC... Is SWC now ready for this?

[hjellek]

Support for Stage 3 decorators seems to have landed on SWC now: https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion

[iSuslov]

It's still broken and non configurable while type checking via tsc works flawlessly

Support for Stage 3 decorators seems to have landed on SWC now: https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion

@kdy1 we have turbopack and swc not working correctly. Turbopack doing really strange things:

export function ClassDecorator<T extends abstract new (...args: any) => any>() {
    return function (target:T,context: ClassDecoratorContext<T>) {
        console.log('ClassDecorator target', target)
        console.log('ClassDecorator context', context)
    };
}

ClassDecorator target:

ClassDecorator context: undefined

[kdy1]

Stage 3 decorator is not landed in SWC side

[danceroutine]

Another way to quickly fix this issue, without waiting for NextJS to update, is to use patch-package or pnpm patch to directly enable SWC's stage 3 decorator support.

An example of how to use pnpm patch to enable this can be found at orch-js/orch-js@47b28ee. Just simply mark decorators as true and specify the decoratorVersion to 2022-03.

@runjuu Just wanted to hop in real quick and and say thank you for this, this worked a treat and saved my bacon.

[HerrNiklasRaab]

@kdy1 I don't understand, this isn't the offical docs?

Support for Stage 3 decorators seems to have landed on SWC now: https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion

[HerrNiklasRaab]

Given that support has landed in SWC, there is a ready to merge PR and high demand for a solution. Isn't this a low hanging fruit?