decoratorsBeforeExport error when parsing JS files

[IgnaceMaes]

I've been going through the tutorial, amazing job!

When creating an AST traversal matching on visitClassDeclaration in a JavaScript file, I'm seeing the following error when a class has a decorator:

<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:63
}, descriptor)), Object.assign(new constructor(), properties));
                               ^

SyntaxError: Decorators must be placed *after* the 'export' keyword. Remove the 'decoratorsBeforeExport: false' option to use the '@decorator export class {}' syntax. (8:0)
    at instantiate (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:63:32)
    at constructor (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:358:12)
    at JSXParserMixin.raise (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3207:19)
    at JSXParserMixin.parseDecorators (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:12735:14)
    at JSXParserMixin.parseStatementLike (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:12536:25)
    at JSXParserMixin.parseModuleItem (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:12515:17)
    at JSXParserMixin.parseBlockOrModuleBlockBody (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:13139:36)
    at JSXParserMixin.parseBlockBody (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:13132:10)
    at JSXParserMixin.parseBlockBody (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:520:11)
    at JSXParserMixin.parseProgram (<redacted-project-root>/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:12414:10) {
  code: 'BABEL_PARSER_SYNTAX_ERROR',
  reasonCode: 'DecoratorExportClass',
  loc: Position { line: 8, column: 0, index: 212 },
  pos: [Getter/Setter]
}

Node.js v18.16.0

on e.g. the following component:

// imports ...

@tagName('')
export default class FooBarComponent extends Component {
  foo = 9000;
}

When changing the decoratorsBeforeExport option to true in the javascript config for babel it does work. Is this disabled on purpose? As putting the decorator in front of the export keyword is a common Ember pattern. In a TypeScript file this works as expected.

[ijlee2]

Thanks for the feedback. No, no particular reason other than I had copy-pasted the configuration from jscodeshift. I'll need to study what the configuration actually does in the near future.

I realized that Ember sets the value to true thanks to a fork and updated the value in #74. I was waiting on a release till I finish writing another tutorial, but will go ahead and release the change now.

[ijlee2]

@codemod-utils/[email protected] will fix this issue. (Sorry for the late response. Completely forgot about it.)