webpack5#1111

.gitignore

@@ -130,4 +130,7 @@ docker_environment_init.sh
 .envrc
 
 # Exclude Makefiles
-Makefile
+Makefile
+
+# Exclude files create at runtime - by webpack and storybook
+common/static/

Dockerfile

@@ -27,7 +27,7 @@ RUN apt-get update && apt-get install -y libgdal-dev
 # Install and set up nvm
 RUN mkdir /.nvm
 ENV NVM_DIR /.nvm
-ENV NODE_VERSION 12.16.0
+ENV NODE_VERSION 16.20.1
 RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.35.0/install.sh | bash \
     && . $NVM_DIR/nvm.sh \
     && nvm install $NODE_VERSION \

civictechprojects/templates/new_index.html

@@ -13,7 +13,6 @@
     <meta name="og:url" content="{{ canonical_url }}" />
     <meta name="image" property="og:image" content="{{ og_image }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="/static/js/runtime.bundle.js" defer></script>
     <script src="/static/js/main.bundle.js" defer></script>
     <script src="/static/js/vendors.bundle.js" defer></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">

common/components/mount-components.js

@@ -12,7 +12,7 @@ import SignUpErrorAdapter from "./componentsBySection/signUp/SignUpErrorAdapter.
 
 // TODO: Figure out a better way to prevent react console error where it's
 // expecting node Environment variables
-global.process = {
+window.process = {
   env: {
     NODE_ENV: "production",
   },

democracylab/templates/base.html

@@ -11,7 +11,8 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     <script src="https://use.fontawesome.com/21e87da3a9.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
-    <script src="/static/js/bundle.js" defer></script>
+    <script src="/static/js/main.bundle.js" defer></script>
+    <script src="/static/js/vendors.bundle.js" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js" defer></script>
     {% block extra_head %} {% endblock extra_head %}
 </head>

package.json

@@ -71,9 +71,9 @@
     "sass": "^1.52.1",
     "sync-exec": "~0.6.2",
     "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.3.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0",
     "webpack-merge": "^4.2.2"
   },
   "resolutions": {
@@ -82,7 +82,6 @@
     "mixin-deep": "^1.3.2",
     "set-value": "^2.0.1",
     "js-yaml": "^3.13.1",
-    "acorn": "^6.4.1",
     "minimist": "^1.2.2",
     "serialize-javascript": "^3.1.0",
     "node-fetch": "^2.6.1",

webpack.common.js

@@ -34,14 +34,15 @@ module.exports = {
         }
     ]
   },
-  resolve: {
-    aliasFields: ['browser']
-  },
-  node: {
-      child_process: "empty",
-      fs: "empty",
-      tls: "empty"
+  resolve:{
+    aliasFields: ['browser'],
+    extensions: ['.*', '.js', '.jsx'],
+    fallback: {
+      fs: false,
+      tls: false
+    }
   },
+  node: false,
   plugins: [
     new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
@@ -52,14 +53,13 @@ module.exports = {
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       filename: 'css/[name].styles.css',
-      allChunks: true,
-    })
+    }),
   ],
   optimization: {
-    runtimeChunk: 'single',
-    splitChunks: {
+    splitChunks: { 
+      chunks: 'all',
       cacheGroups: {
-        vendor: {
+        vendors: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',