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