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",