Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Typescript 5 decorators do not build #48360

Open
1 task done
austinlogo opened this issue Apr 13, 2023 · 11 comments · May be fixed by #65963
Open
1 task done

Typescript 5 decorators do not build #48360

austinlogo opened this issue Apr 13, 2023 · 11 comments · May be fixed by #65963
Assignees
@kdy1
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. SWC Related to minification/transpilation in Next.js.

Comments

@austinlogo
Copy link

austinlogo commented Apr 13, 2023 •
edited by padmaia

Verify canary release

  • 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
@austinlogo austinlogo added the bug Issue was opened via the bug report template. label Apr 13, 2023
@github-actions github-actions bot added the SWC Related to minification/transpilation in Next.js. label Apr 13, 2023
@nandorojo
Copy link

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

@Frikki
Copy link

Frikki commented Jun 7, 2023

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

@nandorojo
Copy link

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
Copy link

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
Copy link

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

@pokatomnik
Copy link

pokatomnik commented Jun 8, 2023 •
edited

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;
  },
};
  1. 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 added a commit to orch-js/orch-js that referenced this issue Aug 21, 2023
@runjuu
fix(example/nextjs): compiling issues with decorators
babbc83 
- vercel/next.js#48360
- vercel/next.js#30413 (comment)
- vercel/next.js#30918
@runjuu
Copy link
Contributor

runjuu commented Aug 21, 2023

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.

@balazsorban44 balazsorban44 added the linear: next Confirmed issue that is tracked by the Next.js team. label Aug 24, 2023
@yanickrochon
Copy link

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.

@kdy1 kdy1 self-assigned this Nov 20, 2023
@Traveller23
Copy link

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).

@qd-qd
Copy link

qd-qd commented Apr 25, 2024

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
Copy link

dartess commented May 7, 2024

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

@kdy1 kdy1 linked a pull request May 20, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kdy1 kdy1

Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. SWC Related to minification/transpilation in Next.js.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Support specifying decorator version vercel/next.js