💻
How are you using Babel?
Programmatic API (babel.transform, babel.parse)
Input code
Arrow function with generics:
Babel REPL
Configuration file name
babel.config.json, babel.config.js
Configuration
module.exports = (api) => ({
sourceType: 'unambiguous',
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3,
loose: false,
targets: api.caller((caller) => caller && caller.target === 'node') ? { node: '12' } : {},
},
],
'@babel/preset-typescript',
['@babel/preset-react', { runtime: 'automatic', importSource: 'theme-ui', throwIfNamespace: false }],
],
plugins: [
'@emotion/babel-plugin',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-class-properties',
...(api.env('test') ? [] : ['@loadable/babel-plugin']),
'@babel/plugin-transform-runtime',
...(api.env('test')
? []
: [['babel-plugin-styled-components', { ssr: true, displayName: false, namespace: 'corgi' }]]),
],
});Current and expected behavior
Current behavior:
$ node
> require('@babel/parser').parse('const fn = <T>() => {}', { plugins: ['jsx', 'typescript'] })
Uncaught:
[SyntaxError: Single type parameter T should have a trailing comma. Example usage: <T,>. (1:14)
] {
code: 'BABEL_PARSER_SYNTAX_ERROR',
reasonCode: 'SingleTypeParameterWithoutTrailingComma',
syntaxPlugin: 'typescript',
loc: Position { line: 1, column: 14, index: 14 },
pos: [Getter/Setter]
}
Expected behavior (working on @babel/parser 7.17.0)
$ node
> require('@babel/parser').parse('const fn = <T>() => {}', { plugins: ['jsx', 'typescript'] })
Node {
type: 'File',
start: 0,
end: 22,
loc: SourceLocation {
start: Position { line: 1, column: 0, index: 0 },
end: Position { line: 1, column: 22, index: 22 },
filename: undefined,
identifierName: undefined
},
errors: [],
program: Node {
type: 'Program',
start: 0,
end: 22,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
sourceType: 'script',
interpreter: null,
body: [ [Node] ],
directives: []
},
comments: []
}
Environment
- Babel version: 7.17.7
- Node version: 16.13.2
- npm version: 8.1.2
- OS: macOS 12.13
Possible solution
No response
Additional context
It seems like the presence of both typescript and react plugins is at fault here. Removing the jsx plugin fixes the issue (although it's not an option for us).
💻
How are you using Babel?
Programmatic API (
babel.transform,babel.parse)Input code
Arrow function with generics:
Babel REPL
Configuration file name
babel.config.json, babel.config.js
Configuration
Current and expected behavior
Current behavior:
Expected behavior (working on @babel/parser 7.17.0)
Environment
Possible solution
No response
Additional context
It seems like the presence of both
typescriptandreactplugins is at fault here. Removing thejsxplugin fixes the issue (although it's not an option for us).