Update to Webpack 5 (fixes crypto error on build) (#738)

* Updating react-number-editor dependency from stale named branch

* Remove references to deprecated react-addons-perf package

* Issue #25 Webpack updated to current version, many
dependencies updated, Babel & Webpack configs updated.
Add dev & prod Dockerfiles and update README with Docker instructions
Created webpack.common.js.
Coriolis-data now specified as github dependency

* Bump bugfix versions of react & react-dom only

* Workbox dependency upgrade for webpack 5 compat

* Stab at upgrading workbox dep
Far more fatal webpack errors :(

* Automate reinstall/rebuild with npm script

* Working build again w updated deps
Disabled/commented out all bugsnag references
Added production-like Docker build for troubleshooting issues that don't
 appear in dev server

* Remove deprecated @babel/polyfill import & dependency

* Fix to service worker to v5 of workbox
and align with webpack 5 plugin

* Disabling recent round of polyfills. Don't think
they're necessary.

* Whitespace in package.json

* Add Buffer as Webpack plugin. Fix indenting.
Fix deprecated call to Buffer.

* Remove bugsnag and deprecated babel code that was
 commented out, per convo with Felix

---------

Co-authored-by: Sam Clayton <sam@goranku.com>

src/.htaccess

@@ -214,7 +214,7 @@ Options -MultiViews
     #       </Files>
 
     AddType application/x-web-app-manifest+json         webapp
-    AddType text/cache-manifest                         appcache manifest
+    # AddType text/cache-manifest                         appcache manifest
 
   # Media files
     AddType audio/mp4                                   f4a f4b m4a

src/app/Coriolis.jsx

@@ -93,7 +93,7 @@ export default class Coriolis extends React.Component {
   _importBuild(r) {
     try {
       // Need to decode and gunzip the data, then build the ship
-      const data = zlib.inflate(new Buffer(r.params.data, 'base64'), { to: 'string' });
+      const data = zlib.inflate(new Buffer.from(r.params.data, 'base64'), { to: 'string' });
       const json = JSON.parse(data);
       console.info('Ship import data: ');
       console.info(json);
@@ -149,13 +149,6 @@ export default class Coriolis extends React.Component {
    */
   _onError(msg, scriptUrl, line, col, errObj) {
     console && console.error && console.error(arguments); // eslint-disable-line no-console
-    if (errObj) {
-      if (errObj instanceof Error) {
-        bugsnagClient.notify(errObj); // eslint-disable-line
-      } else if (errObj instanceof String) {
-        bugsnagClient.notify(msg, errObj); // eslint-disable-line
-      }
-    }
     this.setState({
       error: <ErrorDetails error={{ message: msg, details: { scriptUrl, line, col, error: JSON.stringify(errObj) } }}/>,
       page: null,

src/app/index.js

@@ -1,12 +1,6 @@
-import '@babel/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import '../less/app.less';
 import Coriolis from './Coriolis';
-// import TapEventPlugin from 'react/lib/TapEventPlugin';
-// import EventPluginHub from 'react/lib/EventPluginHub';
-
-// onTouchTap not ready for primetime yet, too many issues with preventing default
-// EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });
 
 render(<Coriolis />, document.getElementById('coriolis'));

src/app/pages/OutfittingPage.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import Perf from 'react-addons-perf';
 import { Ships } from 'coriolis-data/dist';
 import cn from 'classnames';
 import Page from './Page';
@@ -58,7 +57,6 @@ export default class OutfittingPage extends Page {
    */
   constructor(props, context) {
     super(props, context);
-    // window.Perf = Perf;
     this.state = this._initState(props, context);
     this._keyDown = this._keyDown.bind(this);
     this._exportBuild = this._exportBuild.bind(this);

src/index.ejs

@@ -40,22 +40,12 @@
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
-
       gtag('config', 'UA-55840909-18');
     </script>
+  </head>
+  <body style="background-color:#000;">
+    <section id="coriolis">
 
-
-
-    <!-- Bugsnag -->
-        <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-        <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>
-      </head>
-      <body style="background-color:#000;">
-        <section id="coriolis">
-
-        </section>
-      </body>
-    </html>
+    </section>
+  </body>
+</html>

src/migrate.html

@@ -24,12 +24,6 @@
       type="image/png"
       href="/192x192.png"
     />
-    <!-- Bugsnag -->
-    <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-    <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>
 
     <!-- Apple/iOS headers -->
     <meta name="apple-mobile-web-app-capable" content="yes" />

src/sw.js

@@ -1,46 +1,54 @@
+import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching';
+import {NavigationRoute, registerRoute} from 'workbox-routing';
+import {StaleWhileRevalidate, CacheFirst} from 'workbox-strategies';
+import {CacheableResponsePlugin} from 'workbox-cacheable-response'
+import {ExpirationPlugin} from 'workbox-expiration';
+
 console.log('Hello from sw.js');
 
-if (workbox) {
-  console.log('Yay! Workbox is loaded 🎉');
-  workbox.precaching.precacheAndRoute(self.__precacheManifest);
+// See https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/ for guide to changes made
+console.log('Yay! Workbox is loaded 🎉');
+precacheAndRoute(self.__WB_MANIFEST || []);
 
-  workbox.routing.registerNavigationRoute('/index.html');
+const handler = createHandlerBoundToURL('/index.html');
+const navigationRoute = new NavigationRoute(handler
+  // , {allowlist: [...], denylist: [...],}
+);
+registerRoute(navigationRoute);
 
-  workbox.routing.registerRoute(
-    /\.(?:png|jpg|jpeg|svg|gif)$/,
-    new workbox.strategies.CacheFirst({
-      plugins: [
-        new workbox.cacheableResponse.Plugin({
-          statuses: [0, 200]
-        })
-      ]
-    })
-  );
 
-  workbox.routing.registerRoute(
-    /\.(?:js|css)$/,
-    new workbox.strategies.StaleWhileRevalidate({
-      cacheName: 'static-resources',
-    })
-  );
+registerRoute(
+  /\.(?:png|jpg|jpeg|svg|gif)$/,
+  new CacheFirst({
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      })
+    ]
+  })
+);
 
-  workbox.routing.registerRoute(
-    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
-    new workbox.strategies.CacheFirst({
-      cacheName: 'google-fonts',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxEntries: 30
-        }),
-        new workbox.cacheableResponse.Plugin({
-          statuses: [0, 200]
-        })
-      ]
-    })
-  );
-} else {
-  console.log('Boo! Workbox didn\'t load 😬');
-}
+registerRoute(
+  /\.(?:js|css)$/,
+  new StaleWhileRevalidate({
+    cacheName: 'static-resources',
+  })
+);
+
+registerRoute(
+  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
+  new CacheFirst({
+    cacheName: 'google-fonts',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 30
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      })
+    ]
+  })
+);
 
 self.addEventListener('message', event => {
   if (!event.data) {