Babel error running email dev

sandrocsimas commented 3 months ago

Describe the Bug

Versions:

"@react-email/components": "0.0.22",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-email": "2.1.6",
// Dev dependencies
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@babel/preset-typescript": "7.24.7",
"@typescript-eslint/parser": "7.10.0",
"typescript": "5.5.4"

I have the following script in my package.json: "emails:preview": "email dev --dir ./src/cloud/mailer --port 4000"

When I run yarn emails:preview I get the following error:

    React Email 2.1.6
    Running preview at:          http://localhost:4000

  ✔ Ready in 2.4s

SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (10:0)
    at constructor (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:351:19)
    at TypeScriptParserMixin.raise (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:3281:19)
    at TypeScriptParserMixin.expectOnePlugin (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:3315:18)
    at TypeScriptParserMixin.parseDecorator (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12445:10)
    at TypeScriptParserMixin.parseDecorators (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12430:28)
    at TypeScriptParserMixin.parseStatementLike (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12258:25)
    at TypeScriptParserMixin.parseModuleItem (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12237:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12817:36)
    at TypeScriptParserMixin.parseBlockBody (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12810:10)
    at TypeScriptParserMixin.parseProgram (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12137:10)
    at TypeScriptParserMixin.parseTopLevel (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:12127:25)
    at TypeScriptParserMixin.parse (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:13941:10)
    at TypeScriptParserMixin.parse (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:9755:18)
    at parse (/Users/sandro/Workspace/gestor-core/node_modules/react-email/node_modules/@babel/parser/lib/index.js:13962:26)
    at getImportedModules (/Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:584:50)
    at /Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:1056:57
    at step (/Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:260:23)
    at Object.next (/Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:201:20)
    at asyncGeneratorStep (/Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:56:28)
    at _next (/Users/sandro/Workspace/gestor-core/node_modules/react-email/cli/index.js:74:17) {
  code: 'BABEL_PARSER_SYNTAX_ERROR',
  reasonCode: 'MissingOneOfPlugins',
  loc: Position { line: 10, column: 0, index: 342 },
  pos: 342,
  missingPlugin: [ 'decorators', 'decorators-legacy' ]
}

shutting down dev server

My tsconfig.json has emitDecoratorMetadata and experimentalDecorators as true.

I also tried adding a .babelrc file in my project:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

The project is private, but let me know if you need it, so I can create an example project..

To Reproduce

Install the versions I mentioned in the description;
Create the.babelrc with the code I mentioned in the description;
Enable emitDecoratorMetadata and experimentalDecorators in tsconfig.json;
Run email dev --dir

Expected Behavior

The command email dev to work correctly and be able to preview the emails.

What's your node version? (if relevant)

v20.11.0

gabrielmfern commented 2 months ago

Thanks for pointing this out, this is because we parse the email templates using babel ourselves to generate a dependency tree based on what they import so that we can determine when to hot-reload email templates or not. This means that, even with the plugin you added in, you will get the error because when we parse it with babel it won't look for a configuration file at all.

The solution then is going to be adding that decorators plugin to our internal babel instance and it should be fixed.

One question I have is, are you using Babel yourself here? Or was it just a workaround you were trying? I can reproduce the issue without any .babelrc, but by just using any sort of decorators in any template.

gabrielmfern commented 2 months ago

Can you try this out again on react-email@2.1.7-canary.2? Just released a new version with the fix.

sandrocsimas commented 2 months ago

I'm not using babel, only typescript. I just tried to fix the problem by adding a new .babelrc and installing babel dependency. Thanks for the fix. I'll test it as soon as I can.

sandrocsimas commented 2 months ago

@gabrielmfern Sorry for the delay, it is now working fine. Thanks!

gabrielmfern commented 1 month ago

@sandrocsimas Nice! Closing it as as completed.

resend / react-email