Repository: remix-run/remix

Issue #7011: dev_v2 does not recognize decorators and results in an error during compilation
Created: 2023-07-31T22:24:55Z
What version of Remix are you using?
1.19.1
Are all your remix dependencies & dev-dependencies using the same version?

 Yes

Steps to Reproduce
In the future version of Remix Dev, decorators are not being recognized and prevent the project from being compiled, resulting in an error.

clone the repo: https://github.com/lvisb/remix-v2-dev-decorators-error
npm install
npm run dev


Expected Behavior
In version 1, it works correctly.
Actual Behavior
It results in an error and a suggestion to add the @babel/plugin-proposal-decorators.

Duplicate issue #7066: experimentalDecorators seems to have broken in v1.19.2, worked in v1.18.1
Created: 2023-08-04T15:51:26Z
What version of Remix are you using?
1.19.2
Are all your remix dependencies & dev-dependencies using the same version?

 Yes

Steps to Reproduce

start a new project with npx create-remix@latest using the default options when prompted
set compilerOptions.experimentalDecorators to true in tsconfig.json
add the following code to app/routes/_index.tsx:
function exampleDecorator(_: Function) {
  console.log("Decorator called");
}

@exampleDecorator
class Foo {
  sayHi() {
    console.log("Hello");
  }
}

export function loader() {
  const foo = new Foo();
  foo.sayHi();
  return null;
}

run npm run dev

Expected Behavior
This output is seen when using v1.18.1:
 💿  remix dev

 info  building...
 info  built (515ms)
Decorator called
Remix App Server started at http://localhost:3000 (http://192.168.86.24:3000)

Hello
GET / 200 - - 50.052 ms

Actual Behavior
This output is seen when using v1.19.2

> dev
> remix dev


 💿  remix dev

 info  building...
✘ [ERROR] /Users/jwollard/Projects/reproductions/remix-with-decorators/app/routes/_index.tsx: Support for the experimental syntax 'decorators' isn't currently enabled (17:1):

  15 | }
  16 |
> 17 | @exampleDecorator
     | ^
  18 | class Foo {
  19 |   sayHi() {
  20 |     console.log("Hello");

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing. [plugin remix-hmr]

    browser-route-module:routes/_index.tsx?browser:1:30:
      1 │ export { default, meta } from "./routes/_index.tsx";
        ╵                               ~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js:149:12:
      149 │       build.onLoad({
          ╵             ~~~~~~

    at setup (/Users/jwollard/Projects/reproductions/remix-with-decorators/node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js:149:13)
    at handlePlugins (/Users/jwollard/Projects/reproductions/remix-with-decorators/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Closing comment (2023-08-08T13:39:01Z): I didn't see this before, but it might be a dupe of #7011