babel: [Bug]: Parse error when using named import "as" with `babel-plugin-transform-flow-strip-types`
💻
- Would you like to work on a fix?
How are you using Babel?
Other (Next.js, Gatsby, vue-cli, …)
Input code
A file containing a named import using as
or As
results in a parse error when using the babel-plugin-transform-flow-strip-types
. This plugin is used by babelJest
when transpiling some tests including ES6 modules.
For example, this excerpt belongs to a file defining a named import with name as
, which is absolutely valid.
import { historyIcon as as } from "../shapes/history.js";
How to get this file:
wget `npm v @cds/core dist.tarball` && tar -xOzf core-5.4.1.tgz package/icon/collections/essential.js
Configuration file name
No response
Configuration
Using the default config in CRA (create-react-application): https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/babelTransform.js#L26-L37
Current and expected behavior
Current behavior when running yarn test
in my app:
SyntaxError: /home/agamez/Desktop/kubeapps/dashboard/node_modules/@cds/core/icon/collections/essential.js: Unexpected token, expected "," (1:3239)
> 58 | import{historyIcon as as}from"../shapes/history.js";
| ^
at Object._raise (node_modules/@babel/parser/src/parser/error.js:97:45)
at Object.raiseWithData (node_modules/@babel/parser/src/parser/error.js:92:17)
at Object.raise (node_modules/@babel/parser/src/parser/error.js:41:17)
at Object.unexpected (node_modules/@babel/parser/src/parser/util.js:161:16)
at Object.expect (node_modules/@babel/parser/src/parser/util.js:138:28)
at Object.parseNamedImportSpecifiers (node_modules/@babel/parser/src/parser/statement.js:2364:14)
at Object.parseImport (node_modules/@babel/parser/src/parser/statement.js:2145:39)
at Object.parseStatementContent (node_modules/@babel/parser/src/parser/statement.js:265:25)
at Object.parseStatement (node_modules/@babel/parser/src/parser/statement.js:176:17)
at Object.parseStatement (node_modules/@babel/parser/src/plugins/flow/index.js:1815:26)
Expected behavior: no parse errors whatsoever.
Environment
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 7.15.1 - ~/.nvm/versions/node/v14.15.0/bin/npm
Possible solution
When enabling (using the default true value) flow
in CRA it loads the @babel/plugin-transform-flow-strip-types'
plugin which is loading getting the AST given a file. Here is where the parse error is returned.
My guess is that the parser used by this plugin is performing a wrong tokenization in the particular case of a named import with the same value as the predecessor token as
.
Additional context
I wasn’t able to reproduce the parse error using the babelParser.parse
method manually, so I guess it has something to do with the babel-plugin-transform-flow-strip-types
plugin.
More context: https://github.com/kubeapps/kubeapps/pull/3042#issuecomment-870053634
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 2
- Comments: 16 (11 by maintainers)
Thanks. I am starting wroking on it.
@fedeci Thank you. I will wait for the answer a couple of days more.
Amazing! Thanks @fedeci , will get on it!
Thank you to everyone involved in this issue and @doing-art for sending the PR with the fix. As soon as it gets released, we’ll be able to remove an ugly workaround in our project 😛 Thanks!!