SWC can't parse decorator from inversify.js

[HeadFox]

Describe the bug During compilation, swc crash when parsing file that use inversify @injectable decorator.

Error: error: Unexpected token `@`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

  |
7 | @injectable()
  | ^

Caused by:
    0: failed to process js file
    1: Syntax Error

Input code

import { injectable } from 'inversify';

@injectable()
export default abstract class MyClass {
....
}

Config .swcrc

{
 "jsc": {
   "parser": {
     "syntax": "typescript",
     "decorators": true
   },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@/config/*": [
        "config/*"
      ]
    },
    "noFallthroughCasesInSwitch": true,
    "types": [
      "reflect-metadata",
      "@testing-library/jest-dom"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/types",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Expected behavior With the legacy decorator enable, it should compile successfully. This was my babel config before :

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

Version The version of @swc/core: The one included in next@12.0.0

Additionnal context Inversify is using reflect-metadata as polyfill

[kdy1]

I tried locally, and it worked. So I think .swcrc is not applied, and I'll investigate why it's not applied.

[HeadFox]

Thanks ! If it can help when I broke the json file, swc successfully report that the json is broken.

Related issue found on Next.js repo : https://github.com/vercel/next.js/issues/30340

[zetoke]

@kdy1 Related issue too I think : vercel/next.js#30340

I was about to link it as well. I think they are pretty the same. The config isn't picked up for Next.js 12 codebase as well (but it works for running tests there with @swc/jest so I think it's more Next.js specific most probably)

[HeadFox]

Thanks for your reactivity on this @kdy1 🙏

[kdy1]

Made https://github.com/vercel/next.js/pull/30382

[abriginets]

Still seeing this error with next@12.0.1:

error - ./src/server/index-page/index-page.service.ts
Error: error: Unexpected token `@`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

   |
11 | @Injectable()
   | ^

Caused by:
    0: failed to process js file
    1: Syntax Error

.swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    }
  }
}

The code:

import { injectable as Injectable } from 'tsyringe';

@Injectable()
export class IndexPageService {

[HeadFox]

@abriginets Unfortunately this issue revealed an other Next.js issue that allowed .swcrcto be loaded. Customization will be enable later when it will be correctly tested. You can find further information on this discussion : https://github.com/vercel/next.js/discussions/30413

[abriginets]

Hope they will enable it again soon. I've seen a lot of messages regarding decorators support at https://github.com/vercel/next.js/discussions/30174

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.