babel-preset-react-app useESModules option no longer transpiling to ESM in version 10.x

[FjVillar]

Describe the bug

Hello everyone,

First of all, I wanted to thank you for all the work that has been made here. We have been using CRA for a long time now and we are happy with it.

I would try to explain our situation to discover if this is a real bug or it's simply a bad use of the babel-preset-react-app. I have made two sandboxes for you. Hope it helps!

We were using babel-preset-react-app in our Babel configuration to transpile our React components library. We needed to transpile it to ESModules to enable our CRA-made applications to build with the tree-shaking switch on. That's was working until we upgraded to CRA 4, that's where babel-preset-react-app came out not transpiling our files anymore to ESModules.

Here are the sandboxes where the only differences are the package.json dependencies:

• babel-preset-react-app 10.x Sandbox

"dependencies": {
    "@babel/cli": "7.13.16",
    "@babel/core": "7.14.2",
    "@babel/plugin-transform-modules-commonjs": "7.14.0",
    "@babel/runtime": "7.14.0",
    "babel-preset-react-app": "10.0.0"
  },

• babel-preset-react-app 9.x Sandbox

"dependencies": {
    "@babel/cli": "7.10.4",
    "@babel/core": "7.11.4",
    "@babel/plugin-transform-modules-commonjs": "7.10.4",
    "@babel/runtime": "7.11.2",
    "babel-preset-react-app": "9.1.2"
  },

To try these sandboxes, you will have to fork them, after that, you could be able to open a terminal there and run this command npm run build. As you can see, the build script inside package.json is calling babel-cli to build our /src folder into /build.

As you will see in the first sandbox(10.x), the files inside /build are in CommonJs but in the second one(9.x), the files are in ESModules. Is this a bug?

We did some digging before posting this issue, we found this interesting MR where we found some light. As I can see this is a bugfix MR. So, we were relying on a bug to transpile our code into ESModules?. We did understand that the optional property useESModules in babel-preset-react-app was made for this.

Probably we were wrong on that. We know we can achieve this without using babel-preset-react-app but we were happily using it because we thought that as with CRA(react-scripts) we would benefit from further updates and features that would come from this project.

Did you try recovering your dependencies?

Yes

Environment

Node 12 with the above-listed dependencies.

Steps to reproduce

Open one of the sandboxes:

1. Fork the sandbox
2. Open a new terminal (right side of the screen, it is a '+' icon)
3. run npm run build on the terminal
4. Check /build files.

Expected behavior

We were expecting the first sandbox to transpile the code into ESModules as well as the second one.

Actual behavior

It is transpiling the code into CommonJS

Reproducible demo

The sandboxes above.