Update to Babel 7 (#9614)

.babelrc

@@ -1,9 +1,9 @@
 {
   // Javascript settings.
   "presets": [
-    ["env", {
+    ["@babel/env", {
+      "forceAllTransforms": true,
       "targets": {
-        "uglify": true,
         /* This is the full list of browsers we support, but we are not using it because we want babel-polyfill
          * to include only polyfills for more modern browsers.
          * Older browser polyfills are in preESModulesPolyfills.js
@@ -15,27 +15,46 @@
          */
         "browsers": ["Chrome 61", "Firefox 60", "iOS 11", "Edge 16", "ChromeAndroid 67", "Safari 11"]
       },
-      "useBuiltIns": true,
+      "useBuiltIns": "entry",
       "modules": false,
       "debug": false
     }],
-    "react",
-    "stage-2",
+    "@babel/react",
   ],
   "plugins": [
     "lodash",
+    // Stage 2
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    // Stage 3
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    ["@babel/plugin-proposal-class-properties", { "loose": false }],
+    "@babel/plugin-proposal-json-strings",
     ["module-resolver", {
       "root": "./src"
     }]
   ],
   // Share polyfills between files.
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
+      "presets": ["@babel/env"],
       "plugins": [
         "istanbul",
         "dynamic-import-node",
-        "transform-react-remove-prop-types"
+        "transform-react-remove-prop-types",
+        // Stage 2
+        "@babel/plugin-proposal-function-sent",
+        "@babel/plugin-proposal-export-namespace-from",
+        "@babel/plugin-proposal-numeric-separator",
+        "@babel/plugin-proposal-throw-expressions",
+        // Stage 3
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-syntax-import-meta",
+        ["@babel/plugin-proposal-class-properties", { "loose": false }],
+        "@babel/plugin-proposal-json-strings"
       ]
     },
     "production": {

config/nightwatch-sauce.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase, strict */
 'use strict';
 
-require('babel-core/register');
+require('@babel/register');
 
 module.exports = {
   src_folders: ['./src', './test'],

config/nightwatch.docker-compose.js

@@ -3,7 +3,7 @@
 
 const fs = require('fs-extra');
 
-require('babel-core/register');
+require('@babel/register');
 
 const selenium_logs = './logs/selenium';
 const selenium_server_port = process.env.SELENIUM_PORT || 4444;

config/nightwatch.js

@@ -5,8 +5,8 @@ const fs = require('fs-extra');
 const chromedriver = require('chromedriver');
 const seleniumServer = require('selenium-server');
 
-require('babel-register');
-require('babel-polyfill');
+require('@babel/register');
+require('@babel/polyfill');
 
 const selenium_logs = './logs/selenium';
 const selenium_server_port = process.env.SELENIUM_PORT || 4444;

config/webpack.config.js

@@ -9,7 +9,7 @@ const path = require('path');
 const ENVIRONMENTS = require('../src/site/constants/environments');
 const BUCKETS = require('../src/site/constants/buckets');
 
-require('babel-polyfill');
+require('@babel/polyfill');
 
 const timestamp = new Date().getTime();
 

package.json

@@ -75,24 +75,32 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-website#readme",
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "ajv": "^4.7.1",
     "append-query": "2.0.1",
     "axe-core": "^2.6.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^7.1.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.0",
     "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-istanbul": "^4.1.4",
+    "babel-plugin-istanbul": "^5.1.1",
     "babel-plugin-lodash": "^3.2.8",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.2",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-2": "^6.13.0",
-    "babel-register": "^6.18.0",
     "body-parser": "^1.15.2",
     "chai": "^4.1.1",
     "chai-as-promised": "^7.1.1",
@@ -111,7 +119,7 @@
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^3.1.0",
-    "eslint-import-resolver-babel-module": "^4.0.0",
+    "eslint-import-resolver-babel-module": "^5.0.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jest": "^21.26.1",
     "eslint-plugin-jsx-a11y": "5.1",

src/platform/polyfills/index.js

@@ -3,7 +3,7 @@
  * @name platform/polyfills
  */
 
-import 'babel-polyfill';
+import '@babel/polyfill';
 
 import './canvas-toBlob';
 

src/platform/polyfills/preESModulesPolyfills.js

@@ -16,7 +16,7 @@ import 'classlist-polyfill'; // DOM element classList support.
  *
  * 1. Switch the list of browsers in babelrc to the full, older list
  * 2. Set debug to true in babelrc
- * 3. Run a build and get the list of polyfills included in babel-polyfill from the terminal output
+ * 3. Run a build and get the list of polyfills included in @babel/polyfill from the terminal output
  * 4. Switch the browsers list back to the newer list and run another build
  * 5. Remove the polyfills listed in the second list from the first
  * 6. Now you have the full list and you can format them into import statements with some

src/platform/testing/unit/mocha.opts

@@ -1,9 +1,9 @@
 --require src/platform/testing/unit/mocha-setup.js
 --require src/platform/testing/unit/enzyme-setup.js
 --require choma
---require babel-polyfill
+--require @babel/polyfill
 --require blob-polyfill
---compilers js:babel-register,jsx:babel-register
+--compilers js:@babel/register,jsx:@babel/register
 --prof
 --reporter dot
 --timeout 5000