Babel 7 (#16297)

Upgraded from Babel 6 to Babel 7.

The only significant change seems to be the way `@babel/plugin-transform-classes` handles classes differently from `babel-plugin-transform-es2015-classes`. In regular mode, the former injects a `_createClass` function that increases the bundle size, and in the latter it removes the safeguard checks. However, this is okay because we don't all classes in new features, and we want to deprecate class usage in the future in the react repo.

Co-authored-by: Luna Ruan <luna@fb.com>
Co-authored-by: Abdul Rauf <abdulraufmujahid@gmail.com>
Co-authored-by: Maksim Markelov <maks-markel@mail.ru>

.babelrc

@@ -1,23 +0,0 @@
-{
-  "presets": ["react"],
-  "ignore": ["third_party"],
-  "plugins": [
-    "transform-class-properties",
-    "syntax-trailing-function-commas",
-    ["transform-object-rest-spread", { "useBuiltIns": true }],
-    "transform-es2015-template-literals",
-    "transform-es2015-literals",
-    "transform-es2015-arrow-functions",
-    "transform-es2015-block-scoped-functions",
-    ["transform-es2015-classes", { "loose": true }],
-    "transform-es2015-object-super",
-    "transform-es2015-shorthand-properties",
-    "transform-es2015-computed-properties",
-    "transform-es2015-for-of",
-    "check-es2015-constants",
-    ["transform-es2015-spread", { "loose": true }],
-    "transform-es2015-parameters",
-    ["transform-es2015-destructuring", { "loose": true }],
-    ["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
-  ]
-}

babel.config.js

@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    'syntax-trailing-function-commas',
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {loose: true, useBuiltIns: true},
+    ],
+    ['@babel/plugin-transform-template-literals', {loose: true}],
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-object-super',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-for-of',
+    ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
+    ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
+  ],
+};

package.json

@@ -4,38 +4,37 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/code-frame": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-arrow-functions": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.0.0",
+    "@babel/plugin-transform-block-scoped-functions": "^7.0.0",
+    "@babel/plugin-transform-block-scoping": "^7.0.0",
+    "@babel/plugin-transform-classes": "^7.0.0",
+    "@babel/plugin-transform-computed-properties": "^7.0.0",
+    "@babel/plugin-transform-destructuring": "^7.0.0",
+    "@babel/plugin-transform-for-of": "^7.0.0",
+    "@babel/plugin-transform-literals": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-object-super": "^7.0.0",
+    "@babel/plugin-transform-parameters": "^7.0.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+    "@babel/plugin-transform-spread": "^7.0.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/traverse": "^7.0.0",
     "@mattiasbuelens/web-streams-polyfill": "0.1.0",
     "art": "^0.10.1",
-    "babel-cli": "^6.6.5",
-    "babel-code-frame": "^6.26.0",
-    "babel-core": "^6.0.0",
     "babel-eslint": "^10.0.0",
-    "babel-jest": "^23.0.1",
-    "babel-plugin-check-es2015-constants": "^6.5.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-    "babel-plugin-transform-async-to-generator": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
-    "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.23.0",
-    "babel-plugin-transform-es2015-classes": "^6.5.2",
-    "babel-plugin-transform-es2015-computed-properties": "^6.5.2",
-    "babel-plugin-transform-es2015-destructuring": "^6.5.0",
-    "babel-plugin-transform-es2015-for-of": "^6.5.2",
-    "babel-plugin-transform-es2015-literals": "^6.5.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
-    "babel-plugin-transform-es2015-object-super": "^6.5.0",
-    "babel-plugin-transform-es2015-parameters": "^6.5.0",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
-    "babel-plugin-transform-es2015-spread": "^6.5.2",
-    "babel-plugin-transform-es2015-template-literals": "^6.5.2",
-    "babel-plugin-transform-object-rest-spread": "^6.6.5",
-    "babel-plugin-transform-react-jsx-source": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-traverse": "^6.9.0",
     "babylon": "6.18.0",
     "chalk": "^1.1.3",
     "cli-table": "^0.3.1",
@@ -53,7 +52,7 @@
     "eslint-plugin-jest": "^21.6.1",
     "eslint-plugin-no-for-of-loops": "^1.0.0",
     "eslint-plugin-react": "^6.7.1",
-    "eslint-plugin-react-internal": "link:./scripts/eslint-rules/",
+    "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^0.8.3",
     "filesize": "^3.5.6",
     "flow-bin": "^0.72.0",
@@ -76,7 +75,7 @@
     "react-lifecycles-compat": "^3.0.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.52.1",
-    "rollup-plugin-babel": "^3.0.1",
+    "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^2.1.1",
     "rollup-plugin-prettier": "^0.3.0",

packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let {wrap} = require('jest-snapshot-serializer-raw');
 let freshPlugin = require('react-refresh/babel');
 
@@ -15,9 +15,10 @@ function transform(input, options = {}) {
   return wrap(
     babel.transform(input, {
       babelrc: false,
+      configFile: false,
       plugins: [
-        'syntax-jsx',
-        'syntax-dynamic-import',
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
         freshPlugin,
         ...(options.plugins || []),
       ],

packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+let babel = require('@babel/core');
+let {wrap} = require('jest-snapshot-serializer-raw');
+let freshPlugin = require('react-refresh/babel');
+
+function transform(input, options = {}) {
+  return wrap(
+    babel.transform(input, {
+      babelrc: false,
+      configFile: false,
+      plugins: [
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
+        freshPlugin,
+        ...(options.plugins || []),
+      ],
+    }).code,
+  );
+}
+
+describe('ReactFreshBabelPlugin Prod', () => {
+  it('thorw error if environment is not development', () => {
+    let error;
+    try {
+      transform(`function Hello() {}`);
+    } catch (transformError) {
+      error = transformError;
+    }
+    expect(error).toEqual(
+      new Error(
+        '[BABEL] unknown: React Refresh Babel transform should only be enabled ' +
+          'in development environment. Instead, the environment is: "' +
+          process.env.NODE_ENV +
+          '". (While processing: "base$2")',
+      ),
+    );
+  });
+});

packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js

@@ -16,7 +16,7 @@ let ReactDOM;
 let ReactFreshRuntime;
 let act;
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let freshPlugin = require('react-refresh/babel');
 
 describe('ReactFreshIntegration', () => {
@@ -58,11 +58,11 @@ describe('ReactFreshIntegration', () => {
     function execute(source) {
       const compiled = babel.transform(source, {
         babelrc: false,
-        presets: ['react'],
+        presets: ['@babel/react'],
         plugins: [
           freshPlugin,
-          'transform-es2015-modules-commonjs',
-          compileDestructuring && 'transform-es2015-destructuring',
+          '@babel/plugin-transform-modules-commonjs',
+          compileDestructuring && '@babel/plugin-transform-destructuring',
         ].filter(Boolean),
       }).code;
       exportsObj = {};

packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap

@@ -1,12 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ReactFreshBabelPlugin does not consider require-like methods to be HOCs 1`] = `
-
 const A = require('A');
+
 const B = foo ? require('X') : require('Y');
 const C = requireCond(gk, 'C');
 const D = import('D');
-
 export default function App() {
   return <div>
               <A />
@@ -19,7 +18,7 @@ _c = App;
 
 var _c;
 
-$RefreshReg$(_c, 'App');
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin generates signatures for function declarations calling hooks 1`] = `
@@ -53,7 +52,6 @@ export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = _s((props, ref) =>
   React.useEffect(() => {});
   return <h1 ref={ref}>{foo}</h1>;
 }, "useState{[foo, setFoo](0)}\\nuseEffect{}")));
-
 export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = _s2(function (props, ref) {
   _s2();
 
@@ -90,7 +88,6 @@ exports[`ReactFreshBabelPlugin generates valid signature for exotic ways to call
 var _s2 = $RefreshSig$();
 
 import FancyHook from 'fancy';
-
 export default function App() {
   _s2();
 
@@ -104,7 +101,7 @@ export default function App() {
     return foo;
   }
 
-  _s(useFancyState, 'useState{[foo, setFoo](0)}\\nuseFancyEffect{}', true);
+  _s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", true);
 
   const bar = useFancyState();
   const baz = FancyHook.useThing();
@@ -113,7 +110,7 @@ export default function App() {
   return <h1>{bar}{baz}</h1>;
 }
 
-_s2(App, 'useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}', true, function () {
+_s2(App, "useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}", true, function () {
   return [FancyHook.useThing];
 });
 
@@ -121,59 +118,64 @@ _c = App;
 
 var _c;
 
-$RefreshReg$(_c, 'App');
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = `
-
 let connect = () => {
   function Comp() {
     const handleClick = () => {};
+
     return <h1 onClick={handleClick}>Hi</h1>;
   }
+
   return Comp;
 };
+
 function withRouter() {
   return function Child() {
     const handleClick = () => {};
+
     return <h1 onClick={handleClick}>Hi</h1>;
   };
-};
+}
+
+;
 `;
 
 exports[`ReactFreshBabelPlugin ignores complex definitions 1`] = `
-
 let A = foo ? () => {
   return <h1>Hi</h1>;
 } : null;
+
 const B = function Foo() {
   return <h1>Hi</h1>;
 }();
+
 let C = () => () => {
   return <h1>Hi</h1>;
 };
+
 let D = bar && (() => {
   return <h1>Hi</h1>;
 });
 `;
 
 exports[`ReactFreshBabelPlugin ignores higher-order functions that are not HOCs 1`] = `
-
 const throttledAlert = throttle(function () {
   alert('Hi');
 });
+
 const TooComplex = function () {
   return hello;
 }(() => {});
+
 if (cond) {
   const Foo = thing(() => {});
 }
 `;
 
-exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `
-
-export default function () {}
-`;
+exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `export default function () {}`;
 
 exports[`ReactFreshBabelPlugin includes custom hooks into the signatures 1`] = `
 var _s = $RefreshSig$(),
@@ -219,7 +221,7 @@ $RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin includes custom hooks into the signatures when commonjs target is used 1`] = `
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -229,7 +231,7 @@ var _s = $RefreshSig$();
 
 exports.default = App;
 
-var _hooks = require('./hooks');
+var _hooks = require("./hooks");
 
 function App() {
   _s();
@@ -238,7 +240,7 @@ function App() {
   return <h1>{bar}</h1>;
 }
 
-_s(App, 'useFancyState{bar}', false, function () {
+_s(App, "useFancyState{bar}", false, function () {
   return [_hooks.useFancyState];
 });
 
@@ -246,18 +248,16 @@ _c = App;
 
 var _c;
 
-$RefreshReg$(_c, 'App');
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
-
 function hello() {
   return 2 * 2;
 }
 `;
 
 exports[`ReactFreshBabelPlugin registers capitalized identifiers in HOC calls 1`] = `
-
 function Foo() {
   return <h1>Hi</h1>;
 }
@@ -265,6 +265,7 @@ function Foo() {
 _c = Foo;
 export default _c2 = hoc(Foo);
 export const A = _c3 = hoc(Foo);
+
 const B = _c4 = hoc(Foo);
 
 var _c, _c2, _c3, _c4;
@@ -276,15 +277,11 @@ $RefreshReg$(_c4, "B");
 `;
 
 exports[`ReactFreshBabelPlugin registers identifiers used in JSX at definition site 1`] = `
-
 import A from './A';
 import Store from './Store';
-
 Store.subscribe();
-
 const Header = _c = styled.div\`color: red\`;
 const Factory = funny.factory\`\`;
-
 let Alias1 = A;
 let Alias2 = A.Foo;
 const Dict = {};
@@ -294,29 +291,27 @@ function Foo() {
 }
 
 _c2 = Foo;
-const B = _c3 = hoc(A);
-// This is currently registered as a false positive:
-const NotAComponent = _c4 = wow(A);
-// We could avoid it but it also doesn't hurt.
+
+const B = _c3 = hoc(A); // This is currently registered as a false positive:
+
+
+const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
+
 
 var _c, _c2, _c3, _c4;
 
-$RefreshReg$(_c, 'Header');
-$RefreshReg$(_c2, 'Foo');
-$RefreshReg$(_c3, 'B');
-$RefreshReg$(_c4, 'NotAComponent');
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "Foo");
+$RefreshReg$(_c3, "B");
+$RefreshReg$(_c4, "NotAComponent");
 `;
 
 exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = `
-
 import A from './A';
 import Store from './Store';
-
 Store.subscribe();
-
 const Header = _c = styled.div\`color: red\`;
 const Factory = funny.factory\`\`;
-
 let Alias1 = A;
 let Alias2 = A.Foo;
 const Dict = {};
@@ -328,27 +323,29 @@ function Foo() {
 _c2 = Foo;
 React.createContext(Store);
 
-const B = _c3 = hoc(A);
-// This is currently registered as a false positive:
-const NotAComponent = _c4 = wow(A);
-// We could avoid it but it also doesn't hurt.
+const B = _c3 = hoc(A); // This is currently registered as a false positive:
+
+
+const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
+
 
 var _c, _c2, _c3, _c4;
 
-$RefreshReg$(_c, 'Header');
-$RefreshReg$(_c2, 'Foo');
-$RefreshReg$(_c3, 'B');
-$RefreshReg$(_c4, 'NotAComponent');
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "Foo");
+$RefreshReg$(_c3, "B");
+$RefreshReg$(_c4, "NotAComponent");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
-
 const A = _c2 = forwardRef(_c = function () {
   return <h1>Foo</h1>;
 });
+
 const B = _c5 = memo(_c4 = React.forwardRef(_c3 = () => {
   return <h1>Foo</h1>;
 }));
+
 export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
   return <h1>Foo</h1>;
 }));
@@ -366,7 +363,6 @@ $RefreshReg$(_c8, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 2`] = `
-
 export default _c3 = React.memo(_c2 = forwardRef(_c = function (props, ref) {
   return <h1>Foo</h1>;
 }));
@@ -379,7 +375,6 @@ $RefreshReg$(_c3, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 3`] = `
-
 export default _c3 = React.memo(_c2 = forwardRef(_c = function Named(props, ref) {
   return <h1>Foo</h1>;
 }));
@@ -392,18 +387,17 @@ $RefreshReg$(_c3, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level exported function declarations 1`] = `
-
 export function Hello() {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 }
-
 _c = Hello;
 export default function Bar() {
   return <Hello />;
 }
-
 _c2 = Bar;
+
 function Baz() {
   return <h1>OK</h1>;
 }
@@ -411,27 +405,24 @@ function Baz() {
 _c3 = Baz;
 const NotAComp = 'hi';
 export { Baz, NotAComp };
-
 export function sum() {}
 export const Bad = 42;
 
 var _c, _c2, _c3;
 
-$RefreshReg$(_c, 'Hello');
-$RefreshReg$(_c2, 'Bar');
-$RefreshReg$(_c3, 'Baz');
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
+$RefreshReg$(_c3, "Baz");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level exported named arrow functions 1`] = `
-
 export const Hello = () => {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
-
 _c = Hello;
 export let Bar = props => <Hello />;
-
 _c2 = Bar;
 export default (() => {
   // This one should be ignored.
@@ -446,16 +437,18 @@ $RefreshReg$(_c2, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level function declarations 1`] = `
-
 function Hello() {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 }
 
 _c = Hello;
+
 function Bar() {
   return <Hello />;
 }
+
 _c2 = Bar;
 
 var _c, _c2;
@@ -465,18 +458,24 @@ $RefreshReg$(_c2, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level variable declarations with arrow functions 1`] = `
-
 let Hello = () => {
   const handleClick = () => {};
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
+
 _c = Hello;
+
 const Bar = () => {
   return <Hello />;
 };
+
 _c2 = Bar;
+
 var Baz = () => <div />;
+
 _c3 = Baz;
+
 var sum = () => {};
 
 var _c, _c2, _c3;
@@ -487,17 +486,22 @@ $RefreshReg$(_c3, "Baz");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level variable declarations with function expressions 1`] = `
-
 let Hello = function () {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
+
 _c = Hello;
+
 const Bar = function Baz() {
   return <Hello />;
 };
+
 _c2 = Bar;
+
 function sum() {}
+
 let Baz = 10;
 var Qux;
 
@@ -508,10 +512,10 @@ $RefreshReg$(_c2, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
-
 function Hello() {
   return <h1>Hi</h1>;
 }
+
 _c = Hello;
 Hello = connect(Hello);
 

packages/react/src/__tests__/createReactClassIntegration-test.js

@@ -443,6 +443,7 @@ describe('create-react-class-integration', () => {
 
   it('warns if getDerivedStateFromProps is not static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       getDerivedStateFromProps() {
         return {};
       },
@@ -453,7 +454,7 @@ describe('create-react-class-integration', () => {
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
     ).toWarnDev(
-      'Component: getDerivedStateFromProps() is defined as an instance method ' +
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
       {withoutStack: true},
     );
@@ -461,6 +462,7 @@ describe('create-react-class-integration', () => {
 
   it('warns if getDerivedStateFromError is not static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       getDerivedStateFromError() {
         return {};
       },
@@ -471,7 +473,7 @@ describe('create-react-class-integration', () => {
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
     ).toWarnDev(
-      'Component: getDerivedStateFromError() is defined as an instance method ' +
+      'Foo: getDerivedStateFromError() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
       {withoutStack: true},
     );
@@ -479,6 +481,7 @@ describe('create-react-class-integration', () => {
 
   it('warns if getSnapshotBeforeUpdate is static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       statics: {
         getSnapshotBeforeUpdate: function() {
           return null;
@@ -491,7 +494,7 @@ describe('create-react-class-integration', () => {
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
     ).toWarnDev(
-      'Component: getSnapshotBeforeUpdate() is defined as a static method ' +
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
         'and will be ignored. Instead, declare it as an instance method.',
       {withoutStack: true},
     );
@@ -499,6 +502,7 @@ describe('create-react-class-integration', () => {
 
   it('should warn if state is not properly initialized before getDerivedStateFromProps', () => {
     const Component = createReactClass({
+      displayName: 'Component',
       statics: {
         getDerivedStateFromProps: function() {
           return null;

scripts/babel/__tests__/wrap-warning-with-env-check-test.js

@@ -7,7 +7,7 @@
 /* eslint-disable quotes */
 'use strict';
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let wrapWarningWithEnvCheck = require('../wrap-warning-with-env-check');
 
 function transform(input) {

scripts/babel/transform-object-assign-require.js

@@ -7,12 +7,16 @@
 
 'use strict';
 
+const helperModuleImports = require('@babel/helper-module-imports');
+
 module.exports = function autoImporter(babel) {
   function getAssignIdent(path, file, state) {
     if (state.id) {
       return state.id;
     }
-    state.id = file.addImport('object-assign', 'default', 'assign');
+    state.id = helperModuleImports.addDefault(path, 'object-assign', {
+      nameHint: 'assign',
+    });
     return state.id;
   }
 

scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap

@@ -1,61 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
-"import _ReactError from 'shared/ReactError';
-
+"import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/(function () {
+
+/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
+(function () {
   if (!condition) {
-    throw _ReactError(Error(\`This is not a real error message.\`));
+    throw _ReactError(Error(\\"This is not a real error message.\\"));
   }
 })();"
 `;
 
 exports[`error transform should handle escaped characters 1`] = `
-"import _ReactError from 'shared/ReactError';
-
+"import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/(function () {
-  if (!condition) {
-    throw _ReactError(Error(\`What's up?\`));
-  }
-})();"
-`;
 
-exports[`error transform should only add \`ReactError\` and \`ReactErrorProd\` once each 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
-import invariant from 'shared/invariant';
+/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
 (function () {
   if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(Error(\`Do not override existing functions.\`));
-    } else {
-      throw _ReactErrorProd(Error(16));
-    }
-  }
-})();
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(Error(\`Do not override existing functions.\`));
-    } else {
-      throw _ReactErrorProd(Error(16));
-    }
+    throw _ReactError(Error(\\"What's up?\\"));
   }
 })();"
 `;
 
 exports[`error transform should replace simple invariant calls 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
+
 (function () {
   if (!condition) {
     if (__DEV__) {
-      throw _ReactError(Error(\`Do not override existing functions.\`));
+      throw _ReactError(Error(\\"Do not override existing functions.\\"));
     } else {
       throw _ReactErrorProd(Error(16));
     }
@@ -64,14 +41,14 @@ import invariant from 'shared/invariant';
 `;
 
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
+
 (function () {
   if (!condition) {
     if (__DEV__) {
-      throw _ReactError(Error(\`Expected a component class, got \${Foo}.\${Bar}\`));
+      throw _ReactError(Error(\\"Expected a component class, got \\" + Foo + \\".\\" + Bar));
     } else {
       throw _ReactErrorProd(Error(18), Foo, Bar);
     }
@@ -80,14 +57,14 @@ import invariant from 'shared/invariant';
 `;
 
 exports[`error transform should support invariant calls with args 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
+
 (function () {
   if (!condition) {
     if (__DEV__) {
-      throw _ReactError(Error(\`Expected \${foo} target to be an array; got \${bar}\`));
+      throw _ReactError(Error(\\"Expected \\" + foo + \\" target to be an array; got \\" + bar));
     } else {
       throw _ReactErrorProd(Error(7), foo, bar);
     }
@@ -96,12 +73,12 @@ import invariant from 'shared/invariant';
 `;
 
 exports[`error transform should support noMinify option 1`] = `
-"import _ReactError from 'shared/ReactError';
-
+"import _ReactError from \\"shared/ReactError\\";
 import invariant from 'shared/invariant';
+
 (function () {
   if (!condition) {
-    throw _ReactError(Error(\`Do not override existing functions.\`));
+    throw _ReactError(Error(\\"Do not override existing functions.\\"));
   }
 })();"
 `;

scripts/error-codes/__tests__/transform-error-messages.js

@@ -7,7 +7,7 @@
 /* eslint-disable quotes */
 'use strict';
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let devExpressionWithCodes = require('../transform-error-messages');
 
 function transform(input, options = {}) {
@@ -37,16 +37,6 @@ invariant(condition, 'Do not override existing functions.');
     ).toMatchSnapshot();
   });
 
-  it('should only add `ReactError` and `ReactErrorProd` once each', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-invariant(condition, 'Do not override existing functions.');
-`)
-    ).toMatchSnapshot();
-  });
-
   it('should support invariant calls with args', () => {
     expect(
       transform(`

scripts/error-codes/extract-errors.js

@@ -9,7 +9,7 @@
 const babylon = require('babylon');
 const fs = require('fs');
 const path = require('path');
-const traverse = require('babel-traverse').default;
+const traverse = require('@babel/traverse').default;
 const evalToString = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 

scripts/error-codes/transform-error-messages.js

@@ -9,6 +9,7 @@
 const fs = require('fs');
 const evalToString = require('../shared/evalToString');
 const invertObject = require('./invertObject');
+const helperModuleImports = require('@babel/helper-module-imports');
 
 module.exports = function(babel) {
   const t = babel.types;
@@ -45,11 +46,12 @@ module.exports = function(babel) {
             .split('%s')
             .map(raw => t.templateElement({raw, cooked: String.raw({raw})}));
 
-          // Import ReactError
-          const reactErrorIdentfier = file.addImport(
+          const reactErrorIdentfier = helperModuleImports.addDefault(
+            path,
             'shared/ReactError',
-            'default',
-            'ReactError'
+            {
+              nameHint: 'ReactError',
+            }
           );
 
           // Outputs:
@@ -111,10 +113,10 @@ module.exports = function(babel) {
           prodErrorId = parseInt(prodErrorId, 10);
 
           // Import ReactErrorProd
-          const reactErrorProdIdentfier = file.addImport(
+          const reactErrorProdIdentfier = helperModuleImports.addDefault(
+            path,
             'shared/ReactErrorProd',
-            'default',
-            'ReactErrorProd'
+            {nameHint: 'ReactErrorProd'}
           );
 
           // Outputs:

scripts/jest/config.base.js

@@ -7,6 +7,12 @@ module.exports = {
   modulePathIgnorePatterns: [
     '<rootDir>/scripts/rollup/shims/',
     '<rootDir>/scripts/bench/',
+    // ReactFreshBabelPlugin is only available for dev.
+    // We need two tests here because otherwise, ReactFreshBabelPlugin-test will
+    // fail due to obsolete snapshots
+    process.env.NODE_ENV === 'development'
+      ? '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js'
+      : '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js',
   ],
   transform: {
     '.*': require.resolve('./preprocessor.js'),

scripts/jest/config.source-persistent.js

@@ -9,6 +9,12 @@ module.exports = Object.assign({}, baseConfig, {
     'ReactIncrementalTriangle',
     'ReactIncrementalReflection',
     'forwardRef',
+    // ReactFreshBabelPlugin is only available for dev.
+    // We need two tests here because otherwise, ReactFreshBabelPlugin-test will
+    // fail due to obsolete snapshots
+    process.env.NODE_ENV === 'development'
+      ? '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js'
+      : '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js',
   ],
   setupFiles: [
     ...baseConfig.setupFiles,

scripts/jest/preprocessor.js

@@ -2,16 +2,15 @@
 
 const path = require('path');
 
-const babel = require('babel-core');
+const babel = require('@babel/core');
 const coffee = require('coffee-script');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
 
-// Use require.resolve to be resilient to file moves, npm updates, etc
 const pathToBabel = path.join(
-  require.resolve('babel-core'),
-  '..',
+  require.resolve('@babel/core'),
+  '../..',
   'package.json'
 );
 const pathToBabelPluginDevWithCode = require.resolve(
@@ -21,15 +20,15 @@ const pathToBabelPluginWrapWarning = require.resolve(
   '../babel/wrap-warning-with-env-check'
 );
 const pathToBabelPluginAsyncToGenerator = require.resolve(
-  'babel-plugin-transform-async-to-generator'
+  '@babel/plugin-transform-async-to-generator'
 );
-const pathToBabelrc = path.join(__dirname, '..', '..', '.babelrc');
+const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
 const pathToErrorCodes = require.resolve('../error-codes/codes.json');
 
 const babelOptions = {
   plugins: [
     // For Node environment only. For builds, Rollup takes care of ESM.
-    require.resolve('babel-plugin-transform-es2015-modules-commonjs'),
+    require.resolve('@babel/plugin-transform-modules-commonjs'),
 
     pathToBabelPluginDevWithCode,
     pathToBabelPluginWrapWarning,
@@ -38,7 +37,7 @@ const babelOptions = {
     // Don't put this in .babelrc so that we don't embed filenames
     // into ReactART builds that include JSX.
     // TODO: I have not verified that this actually works.
-    require.resolve('babel-plugin-transform-react-jsx-source'),
+    require.resolve('@babel/plugin-transform-react-jsx-source'),
 
     require.resolve('../babel/transform-prevent-infinite-loops'),
   ],

scripts/print-warnings/print-warnings.js

@@ -9,7 +9,7 @@
 const babylon = require('babylon');
 const fs = require('fs');
 const through = require('through2');
-const traverse = require('babel-traverse').default;
+const traverse = require('@babel/traverse').default;
 const gs = require('glob-stream');
 
 const evalToString = require('../shared/evalToString');

scripts/rollup/bundles.js

@@ -134,12 +134,26 @@ const bundles = [
     entry: 'react-dom/server.browser',
     global: 'ReactDOMServer',
     externals: ['react'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-dom/server.node',
     externals: ['react', 'stream'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React DOM Fizz Server *******/
@@ -175,7 +189,13 @@ const bundles = [
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
-        presets: opts.presets.concat([require.resolve('babel-preset-react')]),
+        presets: opts.presets.concat([
+          require.resolve('@babel/preset-react'),
+          require.resolve('@babel/preset-flow'),
+        ]),
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
       }),
   },
 
@@ -186,6 +206,13 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
@@ -193,6 +220,13 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Native Fabric *******/
@@ -202,6 +236,13 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
@@ -209,6 +250,13 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Test Renderer *******/
@@ -218,6 +266,13 @@ const bundles = [
     entry: 'react-test-renderer',
     global: 'ReactTestRenderer',
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
@@ -225,6 +280,13 @@ const bundles = [
     entry: 'react-test-renderer/shallow',
     global: 'ReactShallowRenderer',
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Noop Renderer (used for tests) *******/
@@ -338,6 +400,13 @@ const bundles = [
     entry: 'create-subscription',
     global: 'createSubscription',
     externals: ['react'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Scheduler (experimental) *******/