[WIP] Upgrade Webpack to v5

.node-version

@@ -1 +1 @@
-12.21.0
+16.16.0

client/.node-version

@@ -1 +1 @@
-12.21.0
+16.16.0

client/package.json

@@ -27,9 +27,9 @@
     "fix:staged": "yarn lint-staged",
     "lint:js": "./script/lint-javascript",
     "_build": "npm-run-all clean --parallel _build:browser _build:ssr",
-    "_build:browser": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --colors --optimize-minimize --config ./webpack/config/browser-prd.config.js",
-    "_build:ssr": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --color --optimize-minimize --config ./webpack/config/ssr-prd.config.js",
-    "_build:ssr:rescue": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --color --optimize-minimize --config ./webpack/config/ssr-rescue.config.js",
+    "_build:browser": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --colors --mode production --config ./webpack/config/browser-prd.config.js",
+    "_build:ssr": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --color --mode production --config ./webpack/config/ssr-prd.config.js",
+    "_build:ssr:rescue": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack --color --mode production --config ./webpack/config/ssr-rescue.config.js",
     "_build:browser-config": "IS_BUILD=true node --max_old_space_size=4096 -r @babel/register ./script/build-browser-config.js",
     "_serve:ssr": "node ${BUILD_IN}dist/manifold/ssr/manifold-client-ssr.js",
     "_serve:ssr:rescue": "yarn _wait:builds && npm-run-all --parallel _serve:ssr:rescue:server _serve:ssr:rescue:render",
@@ -38,9 +38,7 @@
     "_watch:banner": "node ./script/banner.js",
     "_watch:ssr": "IS_BUILD=true node -r @babel/register node_modules/.bin/webpack --color --watch --config ./webpack/config/ssr-dev.config.js",
     "_watch:browser": "node -r @babel/register webpack/servers/webpack-dev-server --no-inline",
-    "_wait:builds": "node script/wait.js --name=\"SSR\" --base=${BUILD_IN}dist/manifold/ --on=ssr/manifold-client-ssr-rescue.js,ssr/manifold-client-ssr.js,manifest.json",
-    "storybook": "start-storybook -p 3030",
-    "build-storybook": "build-storybook -o ./storybook-static"
+    "_wait:builds": "node script/wait.js --name=\"SSR\" --base=${BUILD_IN}dist/manifold/ --on=ssr/manifold-client-ssr-rescue.js,ssr/manifold-client-ssr.js,manifest.json"
   },
   "lint-staged": {
     "*.js": "yarn fix",
@@ -124,7 +122,7 @@
     "humps": "^2.0.0",
     "i18next": "^21.6.5",
     "immutability-helper": "^3.x",
-    "isomorphic-fetch": "^2.2.0",
+    "isomorphic-fetch": "^3.x",
     "js-beautify": "^1.14.7",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
@@ -180,7 +178,7 @@
     "slate-history": "^0.86.0",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.90.0",
-    "swagger-ui-react": "4.9.0",
+    "swagger-ui-react": "4.19.0",
     "text-mask-addons": "^3.7.1",
     "tinycolor2": "^1.4.1",
     "tus-js-client": "^1.5.1",
@@ -206,27 +204,20 @@
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "@storybook/addon-a11y": "^5.1",
-    "@storybook/addon-actions": "^5.1",
-    "@storybook/addon-knobs": "^5.1",
-    "@storybook/addons": "^5.1",
-    "@storybook/core": "^5.1",
-    "@storybook/react": "^5.1",
-    "@storybook/theming": "^5.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/react": "^16.9.17",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10",
     "babel-jest": "^24.x",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^9.x",
     "babel-plugin-dynamic-import-node": "^2.2",
     "babel-plugin-module-resolver": "^3.0",
     "babel-plugin-react-require": "^3.1.1",
     "bdd-lazy-var": "^2.5.2",
     "cfonts": "^2.3.0",
     "circular-dependency-plugin": "^5.0.2",
-    "copy-webpack-plugin": "^5.x",
-    "css-loader": "^3.x",
+    "copy-webpack-plugin": "^11.x",
+    "css-loader": "^6.x",
     "enzyme": "^3.x",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^6.x",
@@ -238,34 +229,33 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^4.1.0",
-    "file-loader": "^4.x",
+    "file-loader": "^6.x",
     "jest": "^24.x",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jscodeshift": "^0.6.0",
     "lint-staged": "^9.x",
     "mini-css-extract-plugin": "^1.0",
     "nodemon": "^1.11.0",
-    "null-loader": "^3.x",
+    "null-loader": "^4.x",
+    "path-browserify": "^1.0.1",
     "pluralize": "^8.x",
     "prettier": "^1.5.2",
     "react-refresh": "^0.10.0",
     "react-test-renderer": "^16.8",
     "regenerator-runtime": "^0.13.1",
     "rimraf": "^3.x",
-    "storybook-addon-jsx": "^7.1.1",
-    "storybook-react-router": "^1.0.3",
-    "string-replace-loader": "^2.3.0",
-    "style-loader": "^1.x",
+    "string-replace-loader": "^3.x",
+    "style-loader": "^3.x",
+    "terser-webpack-plugin": "^5.3.9",
     "transform-imports": "^2.0.0",
     "true-case-path": "^2",
-    "uglifyjs-webpack-plugin": "^2.2",
-    "url-loader": "^2.1",
+    "url-loader": "^4.x",
     "wait-on": "^3",
-    "webpack": "^4.46",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.0.0",
-    "webpack-dev-server": "^3.1",
+    "webpack": "^5.x",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.15.0",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
@@ -274,7 +264,7 @@
     "slate": "^0.90.0"
   },
   "engines": {
-    "node": ">=8.0.0 <13.0.0"
+    "node": ">=8.0.0 <19.0.0"
   },
   "browserslist": [
     "defaults",

client/src/api/LowLevelApiClient.js

@@ -51,6 +51,7 @@ export default class LowLevelApiClient {
 
     const out = fetch(endpoint, fetchConfig).catch(error => {
       return new Promise((resolve, reject) => {
+        console.log(error, 'error');
         reject({
           response: {
             status: 503,

client/src/bootstrap.js

@@ -25,12 +25,15 @@ export default function bootstrap(getState, dispatch, cookieHelper) {
         oneTime: true
       }
     );
+
     const settingsPromise = dispatch(settingsRequest).promise;
+
     settingsPromise.then(
       () => {
         ch.notice("Initialization: settings loaded", "ok_hand");
       },
-      () => {
+      (err) => {
+        console.log(err, 'errzd');
         ch.error("Initialization: settings failed to load");
       }
     );

client/src/entry-ssr.js

@@ -27,9 +27,9 @@ import { createServerFetchDataContext } from "hooks/api/contexts/InternalContext
 // we no longer need to support Node 8 and 9.
 // See https://github.com/nodejs/node/issues/21513
 // See https://github.com/nodejs/node/issues/16196#issuecomment-393091912
-const tls = require("tls");
-
-tls.DEFAULT_ECDH_CURVE = "auto";
+// const tls = require("tls");
+//
+// tls.DEFAULT_ECDH_CURVE = "auto";
 
 const socket = config.services.client.rescueEnabled
   ? null

client/src/frontend/components/ApiDocs/SwaggerUiWrapper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import swaggerUIConstructor from "swagger-ui-react/swagger-ui-es-bundle-core";
+// import swaggerUIConstructor from "swagger-ui-react/swagger-ui-es-bundle-core";
 import { Global as GlobalStyles } from "@emotion/react";
 import styles from "theme/styles/apiDocsStyles";
 
@@ -24,23 +24,23 @@ export default class SwaggerUI extends React.Component {
   }
 
   componentDidMount() {
-    const ui = swaggerUIConstructor({
-      plugins: this.props.plugins,
-      tagsSorter: "alpha",
-      spec: this.props.spec,
-      layout: this.props.layout,
-      url: this.props.url,
-      requestInterceptor: this.requestInterceptor,
-      responseInterceptor: this.responseInterceptor,
-      onComplete: this.onComplete,
-      docExpansion: this.props.docExpansion,
-      defaultModelExpandDepth: this.props.defaultModelExpandDepth
-    });
-
-    this.system = ui;
-    this.SwaggerUIComponent = ui.getComponent("App", "root");
-
-    this.forceUpdate();
+    // const ui = swaggerUIConstructor({
+    //   plugins: this.props.plugins,
+    //   tagsSorter: "alpha",
+    //   spec: this.props.spec,
+    //   layout: this.props.layout,
+    //   url: this.props.url,
+    //   requestInterceptor: this.requestInterceptor,
+    //   responseInterceptor: this.responseInterceptor,
+    //   onComplete: this.onComplete,
+    //   docExpansion: this.props.docExpansion,
+    //   defaultModelExpandDepth: this.props.defaultModelExpandDepth
+    // });
+    //
+    // this.system = ui;
+    // this.SwaggerUIComponent = ui.getComponent("App", "root");
+    //
+    // this.forceUpdate();
   }
 
   render() {

client/src/frontend/components/layout/Splash/index.js

@@ -37,6 +37,7 @@ export default function Splash(props) {
     >
       <Styled.Container>
         <Styled.Left>
+testzzsdss
           <Styled.Heading
             $color={headerColor}
             dangerouslySetInnerHTML={{

client/src/global/components/form/Upload/Preview.js

@@ -8,8 +8,7 @@ import has from "lodash/has";
 import isString from "lodash/isString";
 import isObject from "lodash/isObject";
 import startsWith from "lodash/startsWith";
-
-const path = require("path");
+import path from "path-browserify"
 
 export default class FormUploadPreview extends PureComponent {
   static propTypes = {

client/src/theme/styles/globalStyles.js

@@ -13,4 +13,33 @@ export default css`
   ${baseStyles}
   ${utilityStyles}
   ${componentStyles}
+
+  @media print {
+    .library-header {
+      display: none;
+    }
+
+    .screen-reader-text {
+      display: none;
+    }
+
+    body.reader .text-section {
+      font-size: 16px;
+      line-height: 1.25em;
+    }
+
+    body.reader .reader-header {
+      display: none;
+    }
+
+    body.reader .section-next-section,
+    body.reader .section-pagination {
+      display: none;
+    }
+
+    body.reader .app-footer {
+      display: none;
+    }
+  }
+
 `;

client/webpack/config/base.config.js

@@ -104,7 +104,10 @@ export default function buildWebpackConfiguration(target = "web") {
 
     resolve: {
       modules: [paths.src, "node_modules"],
-      alias: plugins.webpackAliases
+      alias: plugins.webpackAliases,
+      fallback: {
+        "path": require.resolve("path-browserify")
+      }
     },
 
     plugins: [

client/webpack/config/browser-base.config.js

@@ -11,13 +11,8 @@ import merge from "webpack-merge";
 const config = merge(baseConfig("web"), {
   entry: {
     "build/manifold-client-browser": ["./src/entry-browser.js"],
-    "build/manifold-client-print": ["./src/theme/print.js"]
   },
 
-  // Webpack mocks node's global "process". We don't want it to in this case, because
-  // we're mocking it ourselves via the .env file that we generate for the client.
-  node: { process: false },
-
   // Browser javascript is written into the www folder in the dist directory.
   output: {
     path: path.join(paths.build, "www")
@@ -30,26 +25,28 @@ const config = merge(baseConfig("web"), {
     }),
 
     // In production, make sure react knows to remove dead code, and uglify output.
-    new DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify(environment.name)
-    }),
+    // new DefinePlugin({
+    //   "process.env.NODE_ENV": JSON.stringify(environment.name)
+    // }),
 
     // Manifest is used by the server-side application to figure out what hashed css and
     // js files should be included in the HTML markup.
     new ManifestPlugin({
       fileName: "manifest.json"
     }),
 
-    new CopyWebpackPlugin([
-      // We always want to include the env.js file in the client build. This file is
-      // loaded by the client, and it provides an environment of sorts for the browser
-      // code.
-      {
-        from: "webpack/templates/www_env.ejs",
-        to: `${paths.build}/www/browser.config.js`,
-        transform: compileEnv
-      }
-    ])
+    // We always want to include the env.js file in the client build. This file is
+    // loaded by the client, and it provides an environment of sorts for the browser
+    // code.
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "webpack/templates/www_env.ejs",
+          to: `${paths.build}/www/browser.config.js`,
+          transform: compileEnv
+        }
+      ]
+    })
   ]
 });