NextJS 12 fails to compile with SWC and decorators

[anthonyalayo]

Describe the bug When attempting to build a NextJS 12 project with SWC, it errors out with:

Syntax error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

To Reproduce Steps to reproduce the behavior:

1. Create a new NextJS 12 project
2. Add next-api-decorators
3. Add a decorator to the code
4. Build & Run

Expected behavior It builds and runs.

Screenshot

Notes When attempting to build the project with the following .babelrc:

{
  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

it works as expected. A solution with SWC would be ideal.

The docs state that this project works with SWC by setting some flags in the tsconfig.json: https://next-api-decorators.vercel.app/docs/#using-with-swc

This does not work, as demonstrated in the screenshot.

[ggurkal]

Hi @anthonyalayo

It seems like you have a .babelrc file in your project, is that correct? Because I could reproduce your issue only by having a .babelrc file in the project.

If you have it, indeed you have to have the correct configuration (as you posted), on the other hand if you want to use SWC, you shouldn't have a babel configuration file.

[anthonyalayo]

Hey @ggurkal

Sorry if it wasn't clear. I did not have a .babelrc in my project. Without it, it gave me the screenshot I put on the issue. I was forced to add the .babelrc just so I could have something working as a workaround in the meantime. I want to remove it. 😄

[ggurkal]

I just created a project with create-next-app, installed this package and used the decorators without any problem. It'd be helpful if you could create a repo that reproduces your error.

[anthonyalayo]

@ggurkal, how's this?

https://github.com/anthonyalayo/decorators-next-example

[anthonyalayo]

Upon building the example, I saw it binary pass/fail after doing this: https://github.com/storyofams/next-api-decorators/issues/402#issuecomment-1115888121

[ggurkal]

Hey @anthonyalayo

You're using the next-superjson package which injects a babel plugin on files under the pages directory. As it's stated in their readme: https://www.npmjs.com/package/next-superjson

This plugin will inject the superjson babel plugin only on files under the pages directory so you can keep using swc for all the other files.

When I replaced module.exports = withSuperjson()(nextConfig) with module.exports = nextConfig, it started working.

[anthonyalayo]

Aha, interesting. So it looks like superjson isn't compatible.. that's unfortunate. Thank you!