How to fix "Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled" without babel

Viewed 689

I created a test project here: https://github.com/baleksandr48/babel-question

Shortly: I created NextJS application and want to use pages/* files for rendering pages, and pages/api/[...catchAll].ts file for handling other requests. I decided to add NestJS - it allows me to divide the whole code on modules.

What is the problem: NestJS uses decorators and when I click button "get data" I have an error:

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

I googled a little and solved this problem by adding .babelrc file:

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

But I wonder the question could I solve it without babel? When I delete .babelrc file and run command ts-node backend/main.ts my application works without error.

Why? Am I right that when I run backend separately I transpiles typescript to es5 (as I set in tsconfig.json) and node works fine with es5. But when I run the app with npm run dev then what?

  • Isn't code been transpiled to es5?
  • isn't everything what I have in pages/api been executed only on the backend side via node, but not via browser?
  • if code been executed in browser, isn't browser works fine with es5?

Please describe me what is the difference between initialising backend app through npm run dev and ts-node backend/main.ts ?

0 Answers
Related