Switch to Babel 7

[clemmy]

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)

[gaearon]

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]

@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 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]

🆘 Need some help 🆘

[gaearon]

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

[Timer]

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]

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]

Thanks @Timer!

[clemmy]

Thanks @Timer!

[Timer]

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]

@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]

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]

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]

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

[existentialism]

@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]

@existentialism Thanks for the context!

[existentialism]

Nice work! 👍

[gaearon]

Thanks for your help!

[Timer]

[hzoo]

thanks everyone!

[JacopKane]

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]

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

[renatonmendes]

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

[gaearon]

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