Switch to Babel 7 #3522

clemmy · 2017-11-30T01:05:16Z

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
jestjs/jest#4557 (comment)

… react-scripts

gaearon · 2017-11-30T01:21:17Z

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.

clemmy · 2017-11-30T21:40:29Z

@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 · 2017-11-30T23:13:48Z

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.

clemmy · 2017-12-01T00:02:40Z

🆘 Need some help 🆘

gaearon · 2017-12-01T00:07:00Z

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

Timer · 2017-12-01T01:03:01Z

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!

Timer · 2017-12-01T01:03:56Z

packages/babel-preset-react-app/index.js

        {
          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 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 · 2017-12-01T01:44:57Z

Thanks @Timer!

clemmy · 2017-12-01T01:50:53Z

Thanks @Timer!

Timer · 2017-12-01T01:57:43Z

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 · 2017-12-01T02:10:13Z

@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 · 2017-12-01T02:21:04Z

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 · 2017-12-01T02:24:09Z

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 · 2017-12-01T02:43:07Z

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

existentialism · 2017-12-01T02:51:09Z

@clemmy the jest thread you linked has a bit of context re: babel 7 + jest situation, especially: jestjs/jest#4557 (comment) and jestjs/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 · 2017-12-01T03:18:05Z

@existentialism Thanks for the context!

existentialism · 2018-01-11T23:50:52Z

Nice work! 👍

gaearon · 2018-01-12T00:10:05Z

Thanks for your help!

Timer · 2018-01-12T00:38:49Z

hzoo · 2018-01-12T01:20:42Z

thanks everyone!

* 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 🤦

JacopKane · 2018-01-15T15:26:25Z

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 · 2018-01-15T16:58:08Z

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

* 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 🤦

renatonmendes · 2018-03-21T13:25:40Z

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...

* 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 🤦

gaearon · 2018-10-02T01:50:19Z

It shipped in 2.0.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

Clement Hoang added 2 commits November 28, 2017 13:24

Update dependencies in react-scripts

7a07a1a

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

7cbeb83

… react-scripts

facebook-github-bot added the CLA Signed label Nov 30, 2017

Clement Hoang added 2 commits November 30, 2017 09:50

Bump more dependency versions

b0ba884

Adjust more versions and edit fix options

5cb193c

Clement Hoang added 5 commits November 30, 2017 14:51

Restore functionality of old preset

ae2b569

Disable Uglify in iframe webpack

222a905

Apply prettier

f9391f7

Re-enable cache in dev and clean deps

fbaacf4

Lock packages and move babel/core to dep in preset

0cdf4f9

Bump babel-jest

dc15217

Re-enable uglify

60a42ae

Timer reviewed Dec 1, 2017

View reviewed changes

Nest forceAllTransforms correctly in webpack config

911debc

Install babel-core bridge for jest

8003d54

gaearon changed the title ~~WIP: Switch to Babel 7~~ Switch to Babel 7 Jan 11, 2018

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

KyleAMathews mentioned this pull request Jan 12, 2018

[v2] Update Babel to v7 gatsbyjs/gatsby#3492

Closed

graingert mentioned this pull request Jan 12, 2018

Investigate moving to Babel 7 when it releases neutrinojs/neutrino#316

Closed

Timer added the tag: enhancement label Jan 13, 2018

wtgtybhertgeghgtwtg mentioned this pull request Jan 13, 2018

⚛️Add idx in babel-preset #1874

Closed

gaearon mentioned this pull request Jan 16, 2018

Roadmap for react-scripts@2.0 #3815

Closed

kadamwhite mentioned this pull request May 22, 2018

eslint-config-react-app@2.1.0 has incorrect peer dependency "babel-eslint@^7.2.3". #4463

Closed

gaearon mentioned this pull request Jun 8, 2018

✏️Discussion: The direction & future of create-react-app #4590

Closed

lock bot locked and limited conversation to collaborators Jan 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to Babel 7 #3522

Switch to Babel 7 #3522

clemmy commented Nov 30, 2017 •

edited

Loading

gaearon commented Nov 30, 2017

clemmy commented Nov 30, 2017

clemmy commented Nov 30, 2017

clemmy commented Dec 1, 2017

gaearon commented Dec 1, 2017

Timer commented Dec 1, 2017 •

edited

Loading

Timer Dec 1, 2017

gaearon commented Dec 1, 2017

clemmy commented Dec 1, 2017

Timer commented Dec 1, 2017

clemmy commented Dec 1, 2017 •

edited

Loading

Timer commented Dec 1, 2017

clemmy commented Dec 1, 2017

gaearon commented Dec 1, 2017

existentialism commented Dec 1, 2017

gaearon commented Dec 1, 2017

existentialism commented Jan 11, 2018

gaearon commented Jan 12, 2018

Timer commented Jan 12, 2018

hzoo commented Jan 12, 2018

JacopKane commented Jan 15, 2018 •

edited

Loading

gaearon commented Jan 15, 2018

renatonmendes commented Mar 21, 2018

gaearon commented Oct 2, 2018 •

edited

Loading

Switch to Babel 7 #3522

Switch to Babel 7 #3522

Conversation

clemmy commented Nov 30, 2017 • edited Loading

gaearon commented Nov 30, 2017

clemmy commented Nov 30, 2017

clemmy commented Nov 30, 2017

clemmy commented Dec 1, 2017

gaearon commented Dec 1, 2017

Timer commented Dec 1, 2017 • edited Loading

Timer Dec 1, 2017

Choose a reason for hiding this comment

gaearon commented Dec 1, 2017

clemmy commented Dec 1, 2017

Timer commented Dec 1, 2017

clemmy commented Dec 1, 2017 • edited Loading

Timer commented Dec 1, 2017

clemmy commented Dec 1, 2017

gaearon commented Dec 1, 2017

existentialism commented Dec 1, 2017

gaearon commented Dec 1, 2017

existentialism commented Jan 11, 2018

gaearon commented Jan 12, 2018

Timer commented Jan 12, 2018

hzoo commented Jan 12, 2018

JacopKane commented Jan 15, 2018 • edited Loading

gaearon commented Jan 15, 2018

renatonmendes commented Mar 21, 2018

gaearon commented Oct 2, 2018 • edited Loading

clemmy commented Nov 30, 2017 •

edited

Loading

Timer commented Dec 1, 2017 •

edited

Loading

clemmy commented Dec 1, 2017 •

edited

Loading

JacopKane commented Jan 15, 2018 •

edited

Loading

gaearon commented Oct 2, 2018 •

edited

Loading