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.

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

SWC can't parse decorator from inversify.js #2546

Closed
HeadFox opened this issue Oct 26, 2021 · 9 comments · Fixed by #2547
Closed

SWC can't parse decorator from inversify.js #2546

HeadFox opened this issue Oct 26, 2021 · 9 comments · Fixed by #2547
Labels
Milestone

Comments

@HeadFox
Copy link

HeadFox commented Oct 26, 2021

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

@HeadFox HeadFox added the C-bug label Oct 26, 2021
@kdy1 kdy1 added this to the v1.2.104 milestone Oct 26, 2021
@kdy1
Copy link
Member

kdy1 commented Oct 26, 2021

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

@HeadFox
Copy link
Author

HeadFox commented Oct 26, 2021

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 : vercel/next.js#30340

@zetoke
Copy link

zetoke commented Oct 26, 2021

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

kdy1 added a commit to kdy1/swc that referenced this issue Oct 26, 2021
kdy1 added a commit that referenced this issue Oct 26, 2021
)

swc:
 - Merge parser config by enabling each feature. (#2546)
@HeadFox
Copy link
Author

HeadFox commented Oct 26, 2021

Thanks for your reactivity on this @kdy1 🙏

@kdy1
Copy link
Member

kdy1 commented Oct 26, 2021

Made vercel/next.js#30382

@abriginets
Copy link

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

HeadFox commented Oct 27, 2021

@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 : vercel/next.js#30413

@abriginets
Copy link

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

@swc-bot
Copy link
Collaborator

swc-bot commented Oct 21, 2022

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.

@swc-project swc-project locked as resolved and limited conversation to collaborators Oct 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

Successfully merging a pull request may close this issue.

5 participants