fix(edge): fxa failed on Edge

because the preset-env didn't transpile various spread (...) operations

this adds all the preset-env config required to transform for Edge. interestingly, setting the target version for edge is not enough to transform them properly and seems like a bug in the loader.

_dev/tsconfig.browser.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2016",
     "module": "esnext",
     "jsx": "react",
     "sourceMap": true

packages/fxa-content-server/app/scripts/app.js

@@ -1,7 +1,7 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+import 'core-js'
 import ConfigLoader from './lib/config-loader';
 import AppStart from './lib/app-start';
 

packages/fxa-content-server/package.json

@@ -144,6 +144,7 @@
     "babel-plugin-dynamic-import-webpack": "1.0.2",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^5.1.1",
+    "core-js": "^3.6.5",
     "css": "2.2.3",
     "eslint": "^6.8.0",
     "eslint-plugin-fxa": "^2.0.2",

packages/fxa-content-server/webpack.config.js

@@ -127,9 +127,9 @@ const webpackConfig = {
           path.resolve(__dirname, 'app', 'tests'),
         ],
         exclude: [
-          path.resolve(__dirname, 'app', 'scripts', 'vendor'),
           path.resolve(__dirname, 'app', 'scripts', 'templates'),
           path.resolve(__dirname, 'node_modules'),
+          path.resolve(__dirname, '..', '..', 'node_modules'),
         ],
         use: [
           {
@@ -144,17 +144,28 @@ const webpackConfig = {
           {
             loader: 'babel-loader',
             options: {
+              babelrc: false,
               cacheDirectory: true,
               presets: [
-                ['@babel/preset-react', {}],
                 [
                   '@babel/preset-env',
                   {
                     targets: {
                       firefox: '60',
+                      edge: '16'
                     },
+                    corejs: 3,
+                    include: [
+                      // these are all for edge - setting the target isn't enough
+                      '@babel/plugin-transform-classes',
+                      '@babel/plugin-transform-destructuring',
+                      '@babel/plugin-transform-spread',
+                      '@babel/plugin-proposal-object-rest-spread',
+                    ],
+                    useBuiltIns: 'entry',
                   },
                 ],
+                ['@babel/preset-react', {}],
                 '@babel/preset-typescript',
               ],
               plugins: [

yarn.lock

@@ -10991,7 +10991,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.0, core-js@npm:^3.0.1, core-js@npm:^3.0.4, core-js@npm:^3.5.0":
+"core-js@npm:^3.0.0, core-js@npm:^3.0.1, core-js@npm:^3.0.4, core-js@npm:^3.5.0, core-js@npm:^3.6.5":
   version: 3.6.5
   resolution: "core-js@npm:3.6.5"
   checksum: 9283348dd5be2f1d07feaf90e2336b3f00a2316e3d3c6d4f789c9a67bdd4d7b08ce1c88dca4e591340130056c6b412b0b74fae039f8e259206f1073f542e4e85
@@ -15508,6 +15508,7 @@ fsevents@^1.2.7:
     convict-format-with-validator: ^6.0.0
     cookie-parser: 1.4.3
     copy-webpack-plugin: ^5.1.1
+    core-js: ^3.6.5
     css: 2.2.3
     css-loader: 1.0.0
     duration-js: 3.6.0