3.6 KiB
Plan: Fix Windows npm run build webpack errors
Context
npm run build fails on Windows with 7 webpack errors (exit code 1).
The two visible error classes are:
-
jimp babel-loader conflict:
Module parse failed: Identifier 'e' has already been declaredatnode_modules/jimp/dist/browser/index.js:31135. Babel is transforming jimp's pre-minified browser bundle, which produces invalid JS. On macOS/Linux, jimp is correctly excluded from babel-loader; on Windows, the exclude regex silently fails. -
Asset Modules Plugin — invalid generator:
generator has an unknown property 'filename'onasset/inlinetype. First-party images (e.g.src/web/static/images/file-128x128.png) should match theasset/resourcerule with afilenamegenerator, but also match theasset/inlinerule whoseexclude: /web\/static/doesn't fire on Windows paths. Two rules matching causes webpack to reject the generator config.
Root cause
All three bugs share one root cause: regex path separators in webpack.config.js use literal / which doesn't match \ on Windows.
Webpack 5 matches test / exclude / include patterns against the module's absolute file path, which uses the OS-native separator. On Windows, paths contain \, so /node_modules\// doesn't match C:\…\node_modules\jimp\….
Proof (from the verification terminal):
> node -e "const re = /node_modules\/(?!crypto-api|bootstrap)/; console.log(re.test('node_modules/jimp'), re.test('node_modules\\jimp'))"
true false
> node -e "const re = /web\/static/; console.log(re.test('src/web/static/x'), re.test('src\\web\\static\\x'))"
true false
Changes
Single file: webpack.config.js
Three regexes need \/ → [/\\] (matches both forward and back slashes):
A. Line 145 — babel-loader exclude
- exclude: /node_modules\/(?!crypto-api|bootstrap)/,
+ exclude: /node_modules[/\\](?!crypto-api|bootstrap)/,
Effect: On Windows, jimp (and all other non-allowlisted node_modules) are correctly excluded from babel-loader again. Fixes error 1.
B. Line 208 — bmfonts test
- test: /(\.fnt$|bmfonts\/.+\.png$)/,
+ test: /(\.fnt$|bmfonts[/\\].+\.png$)/,
Effect: Font bitmap PNGs inside bmfonts/ are matched on Windows too, so they get asset/resource with the assets/fonts/[name][ext] filename generator instead of falling through to the generic PNG rules. Not directly surfacing as an error today (the bmfonts files may not be in the current source tree), but would cause wrong asset handling on Windows if they were.
C. Line 224 — third-party image exclude
- exclude: /web\/static/,
+ exclude: /web[/\\]static/,
Effect: First-party images in src/web/static/ are correctly excluded from the asset/inline rule on Windows, so they only match the asset/resource rule above (which has the filename generator). Fixes error 2.
Files modified
- webpack.config.js — 3 one-character regex changes (insert
[/\\]in place of\/)
No new files, no new dependencies.
Verification
npm run buildon Windows — should now complete without webpack errors;build/prod/should contain the full output includingsha256digest.txtwith the correct hash stamped intoindex.html.npm run buildon macOS — should still work identically (forward slashes match[/\\]).npm starton Windows — dev server should compile without errors (currently the dev server compiles with warnings but serves; after the fix it should be clean).