Webpack 5 upgrade

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 23.x]
 
     steps:
       - uses: actions/checkout@v2

CHANGES.md

@@ -1,5 +1,18 @@
 # Change Log
 
+#### 0.3.0
+
+**2025-02-18**
+
+- **Breaking changes:**
+  - Updated TerriaJS to `8.8.0`
+    - Upgrades Webpack to version 5
+    - Upgraded sass to version 1.80+
+    - [Full list of TerriaJS changes](https://github.com/TerriaJS/terriajs/blob/main/CHANGES.md#880---2025-02-18)
+  - Converted files from CJS to ESM style
+    - This includes `entry.js`, `index.js` - if you have changed these files it is likely that you will get a merge conflict when upgrading. Please [reach out to us](https://github.com/terriajs/terriajs/discussions) if you need help.
+    - Replaced webpack aliases `~terriajs-variables` and `~terriajs` in css imports with relative paths. This simplifies the webpack configuration.
+
 #### 0.2.4
 
 **2024-12-19**

Dockerfile

@@ -1,8 +1,8 @@
 # develop container
-FROM node:16 AS develop
+FROM node:20 AS develop
 
 # build container
-FROM node:16 AS build
+FROM node:20 AS build
 USER node
 
 COPY --chown=node:node . /app
@@ -13,7 +13,7 @@ RUN yarn install --network-timeout 1000000
 RUN yarn gulp release
 
 # deploy container
-FROM node:16-slim AS deploy
+FROM node:20-slim AS deploy
 
 USER node
 

buildprocess/configureWebpackForPlugins.js

@@ -9,7 +9,7 @@ const fs = require("fs");
  * "terriajs-plugin-sample", "terriajs-sample-plugin" as well as
  * "terriajs-some-plugin-for-something".
  */
-const PluginPackagePattern = /^terriajs-.*plugin/;
+const PluginPackagePattern = /(^@terriajs\/plugin-*|^terriajs-.*plugin)/;
 
 function configureWebpackForPlugins(config) {
   config.module.rules.push(createPluginIconsRule());
@@ -71,9 +71,10 @@ function readPackageName(packageFile) {
         ? packageJson.name
         : undefined;
       return packageJsonNames[packageFile];
-    } catch {}
+    } catch {
+      return;
+    }
   }
-  return undefined;
 }
 
 module.exports = configureWebpackForPlugins;

buildprocess/webpack.config.js

@@ -1,31 +1,30 @@
-"use strict";
+const configureWebpackForTerriaJS = require("terriajs/buildprocess/configureWebpack");
+const configureWebpackForPlugins = require("./configureWebpackForPlugins");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
 
-/*global require*/
-var configureWebpackForTerriaJS = require("terriajs/buildprocess/configureWebpack");
-var configureWebpackForPlugins = require("./configureWebpackForPlugins");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var path = require("path");
-
-module.exports = function (devMode, hot) {
-  var config = {
+/**
+ * Webpack config for building terriamap
+ */
+module.exports = function (devMode) {
+  // Base configuration
+  const config = {
     mode: devMode ? "development" : "production",
     entry: "./entry.js",
     output: {
       path: path.resolve(__dirname, "..", "wwwroot", "build"),
       filename: "TerriaMap.js",
-      // work around chrome needing the full URL when using sourcemaps (http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809)
-      publicPath: hot ? "http://localhost:3003/build/" : "build/",
+      publicPath: "build/",
       sourcePrefix: "", // to avoid breaking multi-line string literals by inserting extra tabs.
       globalObject: "(self || window)" // to avoid breaking in web worker (https://github.com/webpack/webpack/issues/6642)
     },
     devtool: devMode ? "eval-cheap-module-source-map" : false,
+
     module: {
+      // following rules are for terriamap source files
+      // rules for building terriajs are configured in configureWebpackForTerriaJS
       rules: [
-        {
-          test: /\.html$/,
-          include: path.resolve(__dirname, "..", "lib", "Views"),
-          loader: "raw-loader"
-        },
+        // build source files
         {
           test: /\.(ts|js)x?$/,
           include: [
@@ -51,119 +50,105 @@ module.exports = function (devMode, hot) {
                   ["@babel/typescript", { allowNamespaces: true }]
                 ],
                 plugins: [
-                  "@babel/plugin-transform-modules-commonjs",
                   ["@babel/plugin-proposal-decorators", { legacy: true }],
-                  "@babel/proposal-class-properties",
-                  "@babel/proposal-object-rest-spread",
-                  "babel-plugin-styled-components",
-                  require.resolve("@babel/plugin-syntax-dynamic-import")
+                  "babel-plugin-styled-components"
                 ]
               }
             }
-            // Re-enable this if we need to observe any differences in the
-            // transpilation via ts-loader, & babel's stripping of types,
-            // or if TypeScript has newer features that babel hasn't
-            // caught up with
-            // {
-            //     loader: require.resolve('ts-loader'),
-            //     options: {
-            //          transpileOnly: true
-            //         // configFile: path.resolve(__dirname, '..', 'node_modules', 'terriajs', 'tsconfig.json')
-            //     }
-            // }
           ]
         },
+        // import html file as string
+        {
+          test: /\.html$/,
+          include: path.resolve(__dirname, "..", "lib", "Views"),
+          type: "asset/source"
+        },
+        // import images
         {
           test: /\.(png|jpg|svg|gif)$/,
           include: path.resolve(__dirname, "..", "wwwroot", "images"),
-          loader: "url-loader",
-          options: {
-            limit: 8192
-          }
+          type: "asset" // inlines as data url if size < 8kb
         },
+        // import globe.gif
         {
           test: /globe\.gif$/,
           include: path.resolve(__dirname, "..", "lib", "Styles"),
-          loader: "url-loader",
-          options: {
-            limit: 65536
+          type: "asset",
+          parser: {
+            dataUrlCondition: {
+              maxSize: 65536 // < inline as data url if size < 64k
+            }
           }
         },
+        // handle css files - inject in html tag
         {
           test: /loader\.css$/,
           include: [path.resolve(__dirname, "..", "lib", "Styles")],
-          loader: ["style-loader", "css-loader"]
+          use: ["style-loader", "css-loader"]
         },
+        // handle scss files
         {
           test: /\.scss$/,
           include: [path.resolve(__dirname, "..", "lib")],
-          loader: hot
-            ? [
-                "style-loader",
-                {
-                  loader: "css-loader",
-                  options: {
-                    sourceMap: true,
-                    modules: true,
-                    camelCase: true,
-                    localIdentName: "tm-[name]__[local]",
-                    importLoaders: 2
-                  }
-                },
-                {
-                  loader: "resolve-url-loader",
-                  options: {
-                    sourceMap: false
-                  }
-                },
-                "sass-loader?sourceMap"
-              ]
-            : [
-                MiniCssExtractPlugin.loader,
-                {
-                  loader: "css-loader",
-                  options: {
-                    sourceMap: true,
-                    modules: true,
-                    camelCase: true,
-                    localIdentName: "tm-[name]__[local]",
-                    importLoaders: 2
-                  }
-                },
-                {
-                  loader: "resolve-url-loader",
-                  options: {
-                    sourceMap: false
-                  }
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                // Use default export for css modules as opposed to the more
+                // efficient named exports. This is required because most of
+                // legacy stylesheets in TerriaJS assumes default export style.
+                defaultExport: true
+              }
+            },
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: true,
+                modules: {
+                  localIdentName: "tjs-[name]__[local]",
+                  exportLocalsConvention: "camelCase"
                 },
-                "sass-loader?sourceMap"
-              ]
+                importLoaders: 2
+              }
+            },
+            {
+              loader: "resolve-url-loader",
+              options: {
+                sourceMap: false
+              }
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                api: "modern",
+                sassOptions: {
+                  sourceMap: true
+                }
+              }
+            }
+          ]
         }
       ]
     },
     plugins: [
+      // Extract SASS styles into a seperate stylesheet
       new MiniCssExtractPlugin({
         filename: "TerriaMap.css",
-        disable: hot,
-        ignoreOrder: true,
-        allChunks: true
+        ignoreOrder: true
       })
     ],
     resolve: {
       alias: {},
       modules: ["node_modules"]
     }
   };
-  config.resolve.alias["terriajs-variables"] = require.resolve(
-    "../lib/Styles/variables.scss"
-  );
+
   return configureWebpackForPlugins(
-    configureWebpackForTerriaJS(
-      path.dirname(require.resolve("terriajs/package.json")),
+    configureWebpackForTerriaJS({
+      terriaJSBasePath: path.dirname(require.resolve("terriajs/package.json")),
       config,
       devMode,
-      hot,
       MiniCssExtractPlugin
-    )
+    })
   );
 };

deploy/docker/Dockerfile

@@ -1,5 +1,5 @@
 # Docker image for the primary terria map application server
-FROM node:16
+FROM node:20
 
 RUN mkdir -p /usr/src/app && mkdir -p /etc/config/client
 WORKDIR /usr/src/app/component

entry.js

@@ -1,28 +1,10 @@
-const globeGif = require("./lib/Styles/globe.gif");
-const polyfill = require("terriajs/lib/Core/polyfill");
+import globeGif from "./lib/Styles/globe.gif";
+import "./lib/Styles/loader.css";
 
-require("./lib/Styles/loader.css");
-
-function loadMainScript() {
-  // load the main chunk
-  return new Promise((resolve, reject) => {
-    require.ensure(
-      ["terriajs/lib/Core/prerequisites"],
-      function (require) {
-        require("terriajs/lib/Core/prerequisites");
-        require.ensure(
-          ["./index"],
-          function (require) {
-            resolve(require("./index"));
-          },
-          reject,
-          "index"
-        );
-      },
-      reject,
-      "index"
-    );
-  });
+async function loadMainScript() {
+  return import("terriajs/lib/Core/prerequisites")
+    .then(() => import("./index"))
+    .then(({ default: terriaPromise }) => terriaPromise);
 }
 
 function createLoader() {
@@ -44,18 +26,16 @@ function createLoader() {
   loaderDiv.style.backgroundColor = "#383F4D";
   document.body.appendChild(loaderDiv);
 
-  polyfill(function () {
-    loadMainScript()
-      .catch(() => {
-        // Ignore errors and try to show the map anyway
-      })
-      .then(() => {
-        loaderDiv.classList.add("loader-ui-hide");
-        setTimeout(() => {
-          document.body.removeChild(loaderDiv);
-        }, 2000);
-      });
-  });
+  loadMainScript()
+    .catch((_err) => {
+      // Ignore errors and try to show the map anyway
+    })
+    .then(() => {
+      loaderDiv.classList.add("loader-ui-hide");
+      setTimeout(() => {
+        document.body.removeChild(loaderDiv);
+      }, 2000);
+    });
 }
 
 createLoader();