Switch to Babel 7

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

@@ -6,134 +6,113 @@
  */
 'use strict';
 
-const plugins = [
-  // Experimental macros support. Will be documented after it's had some time
-  // in the wild.
-  require.resolve('babel-plugin-macros'),
-  // class { handleClick = () => { } }
-  require.resolve('babel-plugin-transform-class-properties'),
-  // The following two plugins use Object.assign directly, instead of Babel's
-  // extends helper. Note that this assumes `Object.assign` is available.
-  // { ...todo, completed: true }
-  [
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    {
-      useBuiltIns: true,
-    },
-  ],
-  // Transforms JSX
-  [
-    require.resolve('babel-plugin-transform-react-jsx'),
-    {
-      useBuiltIns: true,
-    },
-  ],
-  // Polyfills the runtime needed for async/await and generators
-  [
-    require.resolve('babel-plugin-transform-runtime'),
-    {
-      helpers: false,
-      polyfill: false,
-      regenerator: true,
-    },
-  ],
-];
-
-// This is similar to how `env` works in Babel:
-// https://babeljs.io/docs/usage/babelrc/#env-option
-// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
-// https://github.com/babel/babel/issues/4539
-// https://github.com/facebookincubator/create-react-app/issues/720
-// It’s also nice that we can enforce `NODE_ENV` being specified.
-var env = process.env.BABEL_ENV || process.env.NODE_ENV;
-if (env !== 'development' && env !== 'test' && env !== 'production') {
-  throw new Error(
-    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
-      '`BABEL_ENV` environment variables. Valid values are "development", ' +
-      '"test", and "production". Instead, received: ' +
-      JSON.stringify(env) +
-      '.'
-  );
-}
+module.exports = function(api, opts) {
+  if (!opts) {
+    opts = {};
+  }
 
-if (env === 'development' || env === 'test') {
-  // The following two plugins are currently necessary to make React warnings
-  // include more valuable information. They are included here because they are
-  // currently not enabled in babel-preset-react. See the below threads for more info:
-  // https://github.com/babel/babel/issues/4702
-  // https://github.com/babel/babel/pull/3540#issuecomment-228673661
-  // https://github.com/facebookincubator/create-react-app/issues/989
-  plugins.push.apply(plugins, [
-    // Adds component stack to warning messages
-    require.resolve('babel-plugin-transform-react-jsx-source'),
-    // Adds __self attribute to JSX which React will use for some warnings
-    require.resolve('babel-plugin-transform-react-jsx-self'),
-  ]);
-}
+  // This is similar to how `env` works in Babel:
+  // https://babeljs.io/docs/usage/babelrc/#env-option
+  // We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
+  // https://github.com/babel/babel/issues/4539
+  // https://github.com/facebookincubator/create-react-app/issues/720
+  // It’s also nice that we can enforce `NODE_ENV` being specified.
+  var env = process.env.BABEL_ENV || process.env.NODE_ENV;
+  var isEnvDevelopment = env === 'development';
+  var isEnvProduction = env === 'production';
+  var isEnvTest = env === 'test';
+  if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
+    throw new Error(
+      'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(env) +
+        '.'
+    );
+  }
 
-if (env === 'test') {
-  module.exports = {
+  return {
     presets: [
-      // ES features necessary for user's Node version
-      [
-        require('babel-preset-env').default,
+      isEnvTest && [
+        // ES features necessary for user's Node version
+        require('@babel/preset-env').default,
         {
           targets: {
             node: 'current',
           },
         },
       ],
-      // JSX, Flow
-      require.resolve('babel-preset-react'),
-    ],
-    plugins: plugins.concat([
-      // Compiles import() to a deferred require()
-      require.resolve('babel-plugin-dynamic-import-node'),
-    ]),
-  };
-} else {
-  module.exports = {
-    presets: [
-      // Latest stable ECMAScript features
-      [
-        require.resolve('babel-preset-env'),
+      (isEnvProduction || isEnvDevelopment) && [
+        // Latest stable ECMAScript features
+        require('@babel/preset-env').default,
         {
           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,
           },
+          // 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
           modules: false,
         },
       ],
-      // JSX, Flow
-      require.resolve('babel-preset-react'),
-    ],
-    plugins: plugins.concat([
-      // function* () { yield 42; yield 43; }
       [
-        require.resolve('babel-plugin-transform-regenerator'),
+        require('@babel/preset-react').default,
+        {
+          // Adds component stack to warning messages
+          // Adds __self attribute to JSX which React will use for some warnings
+          development: isEnvDevelopment || isEnvTest,
+        },
+      ],
+      [require('@babel/preset-flow').default],
+    ].filter(Boolean),
+    plugins: [
+      // Experimental macros support. Will be documented after it's had some time
+      // in the wild.
+      require('babel-plugin-macros'),
+      // class { handleClick = () => { } }
+      require('@babel/plugin-proposal-class-properties').default,
+      // The following two plugins use Object.assign directly, instead of Babel's
+      // extends helper. Note that this assumes `Object.assign` is available.
+      // { ...todo, completed: true }
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true,
+        },
+      ],
+      // Transforms JSX
+      [
+        require('@babel/plugin-transform-react-jsx').default,
+        {
+          useBuiltIns: true,
+        },
+      ],
+      // Polyfills the runtime needed for async/await and generators
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          polyfill: false,
+          regenerator: true,
+        },
+      ],
+      // function* () { yield 42; yield 43; }
+      !isEnvTest && [
+        require('@babel/plugin-transform-regenerator').default,
         {
           // Async functions are converted to generators by babel-preset-env
           async: false,
         },
       ],
       // Adds syntax support for import()
-      require.resolve('babel-plugin-syntax-dynamic-import'),
-    ]),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isEnvTest &&
+        // Transform dynamic import to require
+        require('babel-plugin-transform-dynamic-import').default,
+    ].filter(Boolean),
   };
-
-  if (env === 'production') {
-    // Optimization: hoist JSX that never changes out of render()
-    // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
-    // TODO: Enable again when these issues are resolved.
-    // plugins.push.apply(plugins, [
-    //   require.resolve('babel-plugin-transform-react-constant-elements')
-    // ]);
-  }
-}
+};

packages/babel-preset-react-app/package.json

@@ -11,21 +11,19 @@
     "index.js"
   ],
   "dependencies": {
-    "babel-plugin-dynamic-import-node": "1.1.0",
+    "@babel/core": "7.0.0-beta.36",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.36",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.36",
+    "@babel/plugin-transform-classes": "7.0.0-beta.36",
+    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.36",
+    "@babel/plugin-transform-react-display-name": "7.0.0-beta.36",
+    "@babel/plugin-transform-react-jsx": "7.0.0-beta.36",
+    "@babel/plugin-transform-regenerator": "7.0.0-beta.36",
+    "@babel/plugin-transform-runtime": "7.0.0-beta.36",
+    "@babel/preset-env": "7.0.0-beta.36",
+    "@babel/preset-flow": "7.0.0-beta.36",
+    "@babel/preset-react": "7.0.0-beta.36",
     "babel-plugin-macros": "2.0.0",
-    "babel-plugin-syntax-dynamic-import": "6.18.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-plugin-transform-react-constant-elements": "6.23.0",
-    "babel-plugin-transform-react-jsx": "6.24.1",
-    "babel-plugin-transform-react-jsx-self": "6.22.0",
-    "babel-plugin-transform-react-jsx-source": "6.22.0",
-    "babel-plugin-transform-regenerator": "6.26.0",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "6.24.1"
-  },
-  "peerDependencies": {
-    "babel-runtime": "^6.23.0"
+    "babel-plugin-transform-dynamic-import": "2.0.0"
   }
 }

packages/eslint-config-react-app/package.json

@@ -11,7 +11,7 @@
     "index.js"
   ],
   "peerDependencies": {
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.2",
     "eslint": "^4.1.1",
     "eslint-plugin-flowtype": "^2.34.1",
     "eslint-plugin-import": "^2.6.0",

packages/react-dev-utils/package.json

@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "address": "1.0.3",
-    "babel-code-frame": "6.26.0",
+    "@babel/code-frame": "7.0.0-beta.36",
     "chalk": "1.1.3",
     "cross-spawn": "5.1.0",
     "detect-port-alt": "1.1.3",

packages/react-error-overlay/package.json

@@ -30,13 +30,15 @@
     "lib/index.js"
   ],
   "devDependencies": {
+    "@babel/code-frame": "7.0.0-beta.36",
+    "@babel/core": "7.0.0-beta.36",
+    "@babel/runtime": "7.0.0-beta.36",
     "anser": "1.4.4",
-    "babel-code-frame": "6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "^7.1.2",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^8.0.2",
+    "babel-jest": "^22.0.6",
+    "babel-loader": "^8.0.0-beta.0",
     "babel-preset-react-app": "^3.1.0",
-    "babel-runtime": "6.26.0",
     "chalk": "^2.1.0",
     "chokidar": "^1.7.0",
     "cross-env": "5.0.5",

packages/react-error-overlay/src/containers/StackFrameCodeBlock.js

@@ -14,7 +14,7 @@ import type { ScriptLine } from '../utils/stack-frame';
 import { primaryErrorStyle, secondaryErrorStyle } from '../styles';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
-import codeFrame from 'babel-code-frame';
+import { codeFrameColumns } from '@babel/code-frame';
 
 type StackFrameCodeBlockPropsType = {|
   lines: ScriptLine[],
@@ -53,10 +53,17 @@ function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
     }
     sourceCode[line - 1] = text;
   });
-  const ansiHighlight = codeFrame(
+  const ansiHighlight = codeFrameColumns(
     sourceCode.join('\n'),
-    lineNum,
-    columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
+    {
+      start: {
+        line: lineNum,
+        column:
+          columnNum == null
+            ? 0
+            : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
+      },
+    },
     {
       forceColor: true,
       linesAbove: contextSize,

packages/react-error-overlay/webpack.config.iframe.js

@@ -19,7 +19,24 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        include: path.resolve(__dirname, './src'),
+        include: [
+          path.resolve(__dirname, './src'),
+          path.dirname(
+            require.resolve('chalk', {
+              paths: path.dirname(require.resolve('@babel/code-frame')),
+            })
+          ),
+          path.dirname(
+            require.resolve(
+              'ansi-styles',
+              path.dirname(
+                require.resolve('chalk', {
+                  paths: path.dirname(require.resolve('@babel/code-frame')),
+                })
+              )
+            )
+          ),
+        ],
         use: 'babel-loader',
       },
     ],

packages/react-scripts/config/webpack.config.dev.js

@@ -96,9 +96,9 @@ module.exports = {
       // Resolve Babel runtime relative to react-scripts.
       // It usually still works on npm 3 without this but it would be
       // unfortunate to rely on, as react-scripts could be symlinked,
-      // and thus babel-runtime might not be resolvable from the source.
-      'babel-runtime': path.dirname(
-        require.resolve('babel-runtime/package.json')
+      // and thus @babel/runtime might not be resolvable from the source.
+      '@babel/runtime': path.dirname(
+        require.resolve('@babel/runtime/package.json')
       ),
       // @remove-on-eject-end
       // Support React Native Web

packages/react-scripts/config/webpack.config.prod.js

@@ -103,9 +103,9 @@ module.exports = {
       // Resolve Babel runtime relative to react-scripts.
       // It usually still works on npm 3 without this but it would be
       // unfortunate to rely on, as react-scripts could be symlinked,
-      // and thus babel-runtime might not be resolvable from the source.
-      'babel-runtime': path.dirname(
-        require.resolve('babel-runtime/package.json')
+      // and thus @babel/runtime might not be resolvable from the source.
+      '@babel/runtime': path.dirname(
+        require.resolve('@babel/runtime/package.json')
       ),
       // @remove-on-eject-end
       // Support React Native Web

packages/react-scripts/fixtures/kitchensink/.template.dependencies.json

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "babel-register": "6.22.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
-    "babel-polyfill": "6.20.0",
+    "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.36",
+    "@babel/polyfill": "7.0.0-beta.36",
+    "@babel/register": "7.0.0-beta.36",
     "chai": "3.5.0",
     "jsdom": "9.8.3",
     "mocha": "3.2.0",