Update to webpacker 4 + babel 7

Author: kaptron

.babelrc

@@ -1,31 +1,14 @@
 {
   "presets": [
-    [
-      "env",
-      {
-        "test": {
-          "modules": "commonjs"
-        },
-        "development": {
-          "modules": false
-        },
-        "production": {
-          "modules": false
-        },
-        "targets": {
-          "uglify": true
-        },
-        "useBuiltIns": true
-      }
-    ],
-    "react"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ],
   "plugins": [
     "lodash",
-    "syntax-dynamic-import",
-    "transform-decorators-legacy",
-    "transform-object-rest-spread",
-    "transform-class-properties",
+    "@babel/plugin-syntax-dynamic-import",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
+    "@babel/plugin-transform-modules-commonjs",
     [
       "module-resolver",
       {
@@ -39,18 +22,11 @@
       }
     ],
     [
-      "transform-runtime",
+      "@babel/plugin-transform-runtime",
       {
         "helpers": false,
-        "polyfill": false,
         "regenerator": true
       }
-    ],
-    [
-      "transform-class-properties",
-      {
-        "spec": true
-      }
     ]
   ],
   "env": {

app/javascript/packs/babel-polyfill.js

@@ -1,3 +1,5 @@
-import 'babel-polyfill'
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 import 'whatwg-fetch'
+// eslint-disable-next-line
 import '~/utils/otherPolyfills'

package.json

@@ -71,20 +71,15 @@
   "dependencies": {
     "@firebase/app-types": "^0.3.2",
     "@material-ui/core": "^1.5",
-    "@rails/webpacker": "4.0.0-pre.2",
+    "@rails/webpacker": "4.0.7",
     "@sentry/browser": "^5.4.0",
     "@sentry/webpack-plugin": "^1.6.2",
     "actioncable": "^5.2.0",
     "axios": "^0.18.0",
     "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-styled-components": "^1.7.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-react": "^6.24.1",
     "browserslist": "^4.5.5",
     "caniuse-lite": "^1.0.30000830",
     "date-fns": "2.0.0-alpha.27",
@@ -160,13 +155,18 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.4.3",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "babel-engine-plugin": "^0.2.1",
-    "babel-eslint": "~8.2.1",
-    "babel-jest": "^22.1.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "babel-runtime": "~6.26.0",
+    "babel-eslint": "^10.0.0",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.0",
     "cypress": "^3.3.1",
     "cypress-cucumber-preprocessor": "ideo/cypress-cucumber-preprocessor#3e39b05",
     "dotenv": "^5.0.1",
@@ -186,6 +186,7 @@
     "eslint-plugin-promise": "~3.5.0",
     "eslint-plugin-react": "~7.11.0",
     "eslint-plugin-standard": "~3.0.1",
+    "file-loader": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
     "jest-css-modules": "^1.1.0",
@@ -198,7 +199,8 @@
     "react-test-renderer": "^16.2.0",
     "wait-on": "^3.1.0",
     "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-dev-server": "^3.1.3"
+    "webpack-cli": "^3.3.4",
+    "webpack-dev-server": "^3.7.1"
   },
   "resolutions": {
     "react-draggable": "git+https://[email protected]/ideo/react-draggable.git#3.0.5-beta.1",