babel-preset-react-app no longer generates ES modules with babel CLI

[krisdover]

Describe the bug

Hi team, we used create-react-app v3.4 with react-styleguidist v11 as part of our internal component library project. To build the actual library distribution we use babel CLI with the react-app preset, and this normally generated ES5 files with ES6 module syntax, which allowed the library and its transitive dependencies to be treeshaken in the consuming web application (which is also built with CRA and thus bundled with webpack).

However, since updating to react-scripts v4.0.1 the react-app preset has stopped generating ES6 modules, and now generates CJS modules. This change broke treeshaking in the consuming app and blew out our bundle size, but also resulted in a production defect because we were using a handful of modules from react-use in the component library, but when tree-shaking broke we ended up pulling in the entire library, included the useLocation() module (which required a polyfill for window.Event) and this broke the app for IE11 users.

It seems this bugfix was the root cause of the ES6 module change. There also doesn't seem to be any configuration options available to restoring the legacy behaviour.

Did you try recovering your dependencies?

N/A?

Which terms did you search for in User Guide?

N/A?

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/Kris_Dover/.npm/_npx/41472/lib/node_modules/create-react-app

  System:
    OS: macOS 11.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.14.0 - ~/.nvm/versions/node/v12.14.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.14.0/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Edge: Not Found
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. npx create-react-app my-componet-library
2. cd my-component-library && npm install -S @babel/cli @babel/core
3. Add the following config to package.json:

 "babel": {
        "presets": [
            [
                "react-app",
                {
                    "absoluteRuntime": false
                }
            ]
        ]
    }

4. NODE_ENV=production npx babel --extensions '.tsx,.ts,.js,.jsx' ./src --out-dir ./dist --copy-files --no-copy-ignored

Expected behavior

dist/App.js should have ES6 module syntax e.g.

...
export default App;

Actual behavior

dist/App.js has CJS module syntax:

...
var _default = App;
exports.default = _default;

Reproducible demo

git clone https://github.com/krisdover/cra-react-app-preset-issue-example
cd cra-react-app-preset-issue-example
npm run build:lib

[krisdover]

It's also worth mentioning that using babel configuration overrides doesn't seem to be an option as it's proven impossible to provide falsy config overrides e.g. this doesn't work:

"babel": {
        "presets": [
            [
                "react-app",
                {
                    "absoluteRuntime": false
                }
            ]
        ],
        "overrides": [
            {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            "useBuiltIns": "entry",
                            "corejs": 3,
                            "modules": false,
                            "exclude": [
                                "transform-typeof-symbol"
                            ]
                        }
                    ]
                ]
            }
        ],
    },

[anujdecoder]

I'm facing the same issue. We use a similar approach for building our web app. Since updating to the latest version of react-scripts, react-app preset has stopped generating ES6 modules. Hence, when we build the app consuming these libraries, we are unable to split the code. Hence, our bundle size blew out of proportion and increased the initial load time of our app. Can anyone suggest a workaround apart from rolling back to v3.4.x?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Apezdr]

I'm unable to compile to es6 and I'm using create-react-app. Not sure why it wouldn't work but I see there is a propsed fix here pickworth#47