-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
babel-preset-react-app no longer generates ES modules with babel CLI #10660
babel-preset-react-app no longer generates ES modules with babel CLI #10660
Comments
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:
|
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? |
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. |
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 |
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 theuseLocation()
module (which required a polyfill forwindow.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
Steps to reproduce
(Write your steps here:)
npx create-react-app my-componet-library
cd my-component-library && npm install -S @babel/cli @babel/core
package.json
: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.Actual behavior
dist/App.js
has CJS module syntax: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
The text was updated successfully, but these errors were encountered: