[Bug]: Parse error when using named import "as" with babel-plugin-transform-flow-strip-types

[antgamdia]

💻

• 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: vmware-tanzu/kubeapps#3042 (comment)

[babel-bot]

Hey @antgamdia! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[fedeci]

Oh wait probably a first good issue.

[takeaways]

Wow a first good issue.

[nicolo-ribaudo]

@takeaways Do you want to work on this? If you need any help I can write some pointers.

---

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Write a comment there to let other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Run make watch (or make build whenever you change a file)
7. Add a test (only input.js; output.json will be automatically generated)
8. Update the code!
9. yarn jest parser to run the tests
   • If some test outputs don't match but the new results are correct, you can delete the bad output.json files and run the tests again
   • If you prefer, you can run OVERWRITE=true yarn jest parser and they will be automatically updated.
10. If it is working, run make test to run all the tests
11. Run git push and open a PR!

[i-seesharp]

Hi @nicolo-ribaudo I'd like to start working on this if possible. Any ideas on how I could get started with this issue specifically?

[fedeci]

I'd suggest you to search in your text editor for "isContextual("as")" and try to dig around the results.
Specifically look for files in the babel-parser/src/plugins/flow/ dir.
If you have any question we are here!

[i-seesharp]

Amazing! Thanks @fedeci , will get on it!

[dhrubesh]

Hi, @i-seesharp are you still working on this? I would like to jump in if you've not gotten the chance to pick it up yet?

[doing-art]

@i-seesharp @dhrubesh Does anybody work on this issue? If not, can I take it? It will be my first issue.

[fedeci]

@doing-art just give them a coupe of more days to answer, then it will be yours!

[doing-art]

@fedeci Thank you. I will wait for the answer a couple of days more.

[fedeci]

@doing-art I'd say that you can take it!

[doing-art]

Thanks. I am starting wroking on it.

[doing-art]

Hello @fedeci @nicolo-ribaudo. I see that some PR has been linked to this issue and even merged. But I investigated the code of the PR and it does not seem to be related to the issue. Correct me if I am wrong. Could it be that it was linked by accident?

Anyway, I opened another PR that should fix the issue. If it is already irrelevant, just close it. Thank you for your time.

[nicolo-ribaudo]

Yes, it was accidentally the wrong number 👍

[antgamdia]

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 :P Thanks!!