Update loot-core to webpack 5 (#1115)

~based on #1114~

This brings its build process up to date with the rest of the project.
We can now use Node 20 to build successfully.

Closes #918

packages/loot-core/bin/build-browser

@@ -12,7 +12,7 @@ cd "$DATA_DIR"
 find * -type f | sort > ../data-file-index.txt
 cd "$ROOT"
 
-OUTPUT_HASH="[hash]"
+OUTPUT_HASH="[contenthash]"
 if [ $NODE_ENV == 'development' ]; then
     # Use a constant filename in development mode to make it easier to
     # rebuild the backend without having to rebuild the frontend
@@ -38,7 +38,7 @@ fi
 yarn webpack --config ../webpack/webpack.browser.config.js \
   --target "webworker" \
   --output-filename "kcab.worker.$OUTPUT_HASH.js" \
-  --output-chunkfilename "[id].[name].kcab.worker.$OUTPUT_HASH.js" \
+  --output-chunk-filename "[id].[name].kcab.worker.$OUTPUT_HASH.js" \
   --progress \
   $WEBPACK_ARGS
 

packages/loot-core/package.json

@@ -17,14 +17,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/register": "^7.12.10",
+    "@babel/register": "^7.22.5",
     "@jlongster/sql.js": "^1.6.7",
     "@rschedule/core": "^1.2.0",
     "@rschedule/ical-tools": "^1.2.0",
     "@rschedule/json-tools": "^1.2.0",
     "@rschedule/standard-date-adapter": "^1.2.0",
     "absurd-sql": "0.0.53",
+    "assert": "^2.0.0",
     "better-sqlite3": "^8.2.0",
+    "browserify-zlib": "^0.2.0",
     "core-js": "^3.8.3",
     "csv-parse": "^4.10.1",
     "csv-stringify": "^5.3.6",
@@ -34,22 +36,25 @@
     "mitt": "^3.0.0",
     "node-fetch": "^2.6.9",
     "node-libofx": "*",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
     "ws": "8.13.0"
   },
   "devDependencies": {
     "@actual-app/api": "*",
     "@actual-app/import-ynab4": "*",
-    "@babel/core": "~7.14.3",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.20.2",
+    "@babel/core": "~7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@types/better-sqlite3": "^7.6.4",
     "@types/jest": "^27.5.0",
     "@types/jlongster__sql.js": "npm:@types/sql.js@latest",
     "@types/pegjs": "^0.10.3",
     "@types/webpack": "^5.28.0",
     "adm-zip": "^0.5.9",
-    "babel-loader": "^8.0.6",
-    "buffer": "^5.5.0",
+    "babel-loader": "^9.1.2",
+    "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
     "date-fns": "^2.29.3",
     "fake-indexeddb": "^3.1.3",
@@ -71,8 +76,8 @@
     "ts-protoc-gen": "^0.15.0",
     "typescript": "^4.6.4",
     "uuid": "3.3.2",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
+    "webpack": "^5.86.0",
+    "webpack-cli": "^5.1.3",
     "ws": "^4.1.0",
     "yargs": "^9.0.1"
   }

packages/loot-core/webpack/webpack.api.config.js

@@ -14,6 +14,7 @@ config.resolve.extensions = [
   '.tsx',
   '.json',
 ];
+config.resolve.fallback = {};
 config.output.filename = 'bundle.api.js';
 config.output.sourceMapFilename = 'bundle.api.js.map';
 config.output.path = path.join(

packages/loot-core/webpack/webpack.browser.config.js

@@ -13,6 +13,9 @@ module.exports = {
     library: 'backend',
     publicPath: '/kcab/',
   },
+  stats: {
+    errorDetails: true,
+  },
   resolve: {
     extensions: [
       '.web.js',
@@ -23,9 +26,22 @@ module.exports = {
       '.tsx',
       '.json',
     ],
-    alias: {
-      fs: 'memfs',
-      path: 'path-browserify',
+    fallback: {
+      assert: require.resolve('assert/'),
+      buffer: require.resolve('buffer/'),
+      // used by sql.js, but only if the 'crypto' global is not defined
+      // used by adm-zip for ZipCrypto, but we don’t use that
+      crypto: false,
+      dgram: false,
+      fs: require.resolve('memfs'),
+      net: false,
+      path: require.resolve('path-browserify'),
+      process: require.resolve('process/browser'),
+      stream: require.resolve('stream-browserify'),
+      tls: false,
+      // used by memfs in a check which we can ignore I think
+      url: false,
+      zlib: require.resolve('browserify-zlib'),
     },
   },
   module: {
@@ -46,10 +62,11 @@ module.exports = {
     ],
   },
   optimization: {
-    namedChunks: true,
+    chunkIds: 'named',
   },
   plugins: [
     new webpack.DefinePlugin({
+      'process.env': '{}',
       'process.env.IS_DEV': JSON.stringify(
         process.env.NODE_ENV === 'development',
       ),
@@ -60,6 +77,10 @@ module.exports = {
       'process.env.ACTUAL_DATA_DIR': JSON.stringify('/'),
       'process.env.ACTUAL_DOCUMENT_DIR': JSON.stringify('/documents'),
     }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser',
+    }),
     new webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
       exclude: /xfo.kcab/,
@@ -68,9 +89,4 @@ module.exports = {
       resourceRegExp: /worker_threads|original-fs/,
     }),
   ],
-  node: {
-    dgram: 'empty',
-    net: 'empty',
-    tls: 'empty',
-  },
 };

upcoming-release-notes/1115.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Update `loot-core` to be built with webpack 5, matching the other packages.