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

Switch to Babel 7 #3522

Merged
merged 37 commits into from Jan 11, 2018

Conversation

Projects
@clemmy
Contributor

clemmy commented Nov 30, 2017

Babel 7 has a lot of new goodies, including JSX fragments. This PR is an attempt to make a pre-release for users to try out Babel 7 with CRA.

Things I'm still trying to mesh out/blocked on:

  • Needed to disable pre-commit hook that runs prettier because it doesn't support JSX fragments, and wouldn't let me commit
  • Need to disable UglifyJsPlugin to make npm run build in react-error-overlay work, can't figure out why
  • Need to add old configuration back into babel-preset-react-app, currently it's overwritten with babel-preset-react
  • Address this PR?
  • Do I need to do anything with Lerna in this PR?
  • Need to re-enable https://github.com/airbnb/babel-plugin-dynamic-import-node. It might be fine to just put it in, but it'll download all the babel 6.x dependencies.
  • Tests are failing. Babel-jest works with Babel 7.x, but jest-runtime depends on Babel 6.x. What's the solution here?

Possibly Relevant Links:
webpack/webpack-dev-server#1104 (comment)
https://github.com/babel/babel-preset-env/pull/264/files
facebook/jest#4557 (comment)

@gaearon

This comment has been minimized.

Member

gaearon commented Nov 30, 2017

Needed to disable pre-commit hook that runs prettier because it doesn't support JSX fragments, and wouldn't let me commit

You can also roll back the change with fragments. We can always test them separately after CI passes.

Clement Hoang added some commits Nov 30, 2017

@clemmy

This comment has been minimized.

Contributor

clemmy commented Nov 30, 2017

@Timer @gaearon

Currently stuck on being unable to build react-error-overlay without commenting our the UglifyJsPlugin inside webpack.config.iframe.js, with the error being:

Failed to compile.

ERROR in iframe-bundle.js from UglifyJs
Unexpected token: keyword (const) [iframe-bundle.js:6461,5]

From what I can tell, its babel configuration is read from the .babelrc, which specifies babel-preset-react-app. From running an isolated babel transform with babel-preset-react-app, it indeed transforms const to var. Any ideas?

@clemmy

This comment has been minimized.

Contributor

clemmy commented Nov 30, 2017

This is how the input going into the Uglify plugin looks: https://gist.github.com/clemmy/401441ba2202c094e2068ed44768242d

I believe this is after the babel transforms because there are React.createElement calls, but notice how there are const declarations in the input. These are found both inside WEBPACK VAR INJECTION, as well as outside.

Clement Hoang
@clemmy

This comment has been minimized.

Contributor

clemmy commented Dec 1, 2017

🆘 Need some help 🆘

@gaearon

This comment has been minimized.

Member

gaearon commented Dec 1, 2017

I'll look tomorrow but maybe @Timer can help out.

@Timer

This comment has been minimized.

Collaborator

Timer commented Dec 1, 2017

Hi! 👋

@babel/code-frame upgraded to chalk@^2 which uses ES6. We (by practice) do not compile node_modules -- there are exceptions though!
I went ahead and fixed this by including the required modules in compilation via commit 60a42ae.

Let me know if you need any more help!

{
targets: {
// React parses on ie 9, so we should too
ie: 9,
// We currently minify with uglify
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
uglify: true,
forceAllTransforms: true,

This comment has been minimized.

@Timer

Timer Dec 1, 2017

Collaborator

This is nested incorrectly afaik.

diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index bb963542..88ff2fd2 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/packages/babel-preset-react-app/index.js
@@ -49,10 +49,10 @@ module.exports = function(api, opts) {
           targets: {
             // React parses on ie 9, so we should too
             ie: 9,
-            // We currently minify with uglify
-            // Remove after https://github.com/mishoo/UglifyJS2/issues/448
-            forceAllTransforms: true,
           },
+          // We currently minify with uglify
+          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+          forceAllTransforms: true,
           // Disable polyfill transforms
           useBuiltIns: false,
           // Do not transform modules to CJS
@gaearon

This comment has been minimized.

Member

gaearon commented Dec 1, 2017

Thanks @Timer!

@clemmy

This comment has been minimized.

Contributor

clemmy commented Dec 1, 2017

Thanks @Timer!

@Timer

This comment has been minimized.

Collaborator

Timer commented Dec 1, 2017

No problem! Thanks for tackling this.

Tests are failing. Babel-jest works with Babel 7.x, but jest-runtime depends on Babel 6.x. What's the solution here?

Can we release a new version of jest-runtime?

@clemmy

This comment has been minimized.

Contributor

clemmy commented Dec 1, 2017

@cpojer Are there currently any plans to release a new version of jest-runtime running on Babel 7/Can we submit a PR for it?

Since we released React 16.2, it'd be nice if we can get create-react-app supporting it ASAP.

@Timer

This comment has been minimized.

Collaborator

Timer commented Dec 1, 2017

Dunno! @cpojer would be able to provide insight on this I'm sure. 😄 Can you put together a pull request for jest-runtime -- prob trivial?

@clemmy

This comment has been minimized.

Contributor

clemmy commented Dec 1, 2017

I may be able to get to it tomorrow or over the weekend. 🙂 But if anyone can do it tonight, I'm fine with that too!

@gaearon

This comment has been minimized.

Member

gaearon commented Dec 1, 2017

What is jest-runtime and why does it need Babel? I assumed only transformer requires Babel (which we could substitute), no?

@existentialism

This comment has been minimized.

Contributor

existentialism commented Dec 1, 2017

@clemmy the jest thread you linked has a bit of context re: babel 7 + jest situation, especially: facebook/jest#4557 (comment) and facebook/jest#4557 (comment).

In short, it should work just fine if you add babel-core@^7.0.0-0 (in addition to @babel/core) alongside a version of jest >=jest@21.3.0-beta.9.

@gaearon

This comment has been minimized.

Member

gaearon commented Dec 1, 2017

@existentialism Thanks for the context!

Clement Hoang

@gaearon gaearon merged commit 72b6d2f into facebook:next Jan 11, 2018

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

2.0 automation moved this from Meh to Ready Jan 11, 2018

@existentialism

This comment has been minimized.

Contributor

existentialism commented Jan 11, 2018

Nice work! 👍

@gaearon

This comment has been minimized.

Member

gaearon commented Jan 12, 2018

Thanks for your help!

@Timer

This comment has been minimized.

Collaborator

Timer commented Jan 12, 2018

@hzoo

This comment has been minimized.

hzoo commented Jan 12, 2018

thanks everyone!

Timer added a commit to Timer/create-react-app that referenced this pull request Jan 13, 2018

Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

gaearon added a commit that referenced this pull request Jan 13, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

Timer added a commit that referenced this pull request Jan 14, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

gaearon added a commit that referenced this pull request Jan 14, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

gaearon added a commit that referenced this pull request Jan 14, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

gaearon added a commit that referenced this pull request Jan 14, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

Timer added a commit to Timer/create-react-app that referenced this pull request Jan 14, 2018

Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

gaearon added a commit that referenced this pull request Jan 14, 2018

Switch to Babel 7 (#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:

Timer added a commit to Timer/create-react-app that referenced this pull request Jan 15, 2018

Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:
@JacopKane

This comment has been minimized.

JacopKane commented Jan 15, 2018

This is great, are you planning to publish this preset on npm under a next or beta version?

Cause using/testing it through git installation doesn't work due to the monorepo structure, and previous preset fails due to API change on 7.x @babel/core preset module structure. (New one requires function preset as applied in this PR)

@gaearon

This comment has been minimized.

Member

gaearon commented Jan 15, 2018

It was never supported to beta-test through Git URLs, but yes, we plan to publish it as next some time within a week.

akstuhl added a commit to akstuhl/create-react-app that referenced this pull request Mar 15, 2018

Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:
@renatonmendes

This comment has been minimized.

renatonmendes commented Mar 21, 2018

I´ve ejected from create-react-app@2.0.0-next.9754a231 and I got the following package.json dependencies:

"dependencies": {
   "autoprefixer": "7.1.6",
   "babel-core": "6.26.0",
   "babel-eslint": "7.2.3",
   "babel-jest": "20.0.3",
   "babel-loader": "7.1.2",
   "babel-preset-react-app": "^3.1.1",
   "babel-runtime": "6.26.0",
   "case-sensitive-paths-webpack-plugin": "2.1.1",
   "chalk": "1.1.3",
   "css-loader": "0.28.7",
   "dotenv": "4.0.0",
   "dotenv-expand": "4.2.0",
   "eslint": "4.10.0",
   "eslint-config-react-app": "^2.1.0",
   "eslint-loader": "1.9.0",
   "eslint-plugin-flowtype": "2.39.1",
   "eslint-plugin-import": "2.8.0",
   "eslint-plugin-jsx-a11y": "5.1.1",
   "eslint-plugin-react": "7.4.0",
   "extract-text-webpack-plugin": "3.0.2",
   "file-loader": "1.1.5",
   "fs-extra": "3.0.1",
   "html-webpack-plugin": "2.29.0",
   "jest": "20.0.4",
   "object-assign": "4.1.1",
   "postcss-flexbugs-fixes": "3.2.0",
   "postcss-loader": "2.0.8",
   "promise": "8.0.1",
   "raf": "3.4.0",
   "react": "^16.2.0",
   "react-dev-utils": "^5.0.0",
   "react-dom": "^16.2.0",
   "style-loader": "0.19.0",
   "sw-precache-webpack-plugin": "0.11.4",
   "url-loader": "0.6.2",
   "webpack": "3.8.1",
   "webpack-dev-server": "2.9.4",
   "webpack-manifest-plugin": "1.3.2",
   "whatwg-fetch": "2.0.3"
 }

As stated that this version support Babel 7, wouldn´t the package.json contain dependencies for Babel 7 as well (@Babel/*) ? Seens to be stuck in 6.26.0...

zhDmitry pushed a commit to zhDmitry/create-react-app that referenced this pull request Sep 30, 2018

Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts

* Add first pass of working dependencies for babel-preset-react-app and react-scripts

* Bump more dependency versions

* Adjust more versions and edit fix options

* Restore functionality of old preset

* Disable Uglify in iframe webpack

* Apply prettier

* Re-enable cache in dev and clean deps

* Lock packages and move babel/core to dep in preset

* Bump babel-jest

* Re-enable uglify

* Nest forceAllTransforms correctly in webpack config

* Install babel-core bridge for jest

* Add jest-cli and babel-core bridge to make tests in react-error-overlay pass

* Re-enable transform-dynamic-import

* Add dynamic import syntax support back

* Use new babel in kitchensink

* Transform modules in test

* Revert "Transform modules in test"

This reverts commit 539e46a.

* Attempt fix for ejected tests

* try this

* Add regenerator back

* Bump babel deps to beta.34

* Remove bad files

* Use default when requiring babel transform plugin

* Bump deps

* Try the fix?

* Oopsie

* Remove some weird things

* Run Babel on react-error-overlay tests

* Try fixing kitchensink

* Use new API for codeFrame

* Add missing (?) babelrc

* Maybe this helps?

* Maybe fix mocha

* I shouldn't have deleted this :facepalm:
@gaearon

This comment has been minimized.

Member

gaearon commented Oct 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment