Webpack Build Hangs Indefinitely in Development Mode

Environment

• OS: macOS
• Metronic Version: 9.3.4
• Webpack: 5.99.9

Description

The webpack build process hangs indefinitely and never completes when running npm run build:js or npm run build.

Root Cause

Two configuration issues in webpack.config.js:

1. Duplicate CSS loader rules (lines 174-181): Two conflicting rules for .css files cause webpack to hang
2. Watch mode always enabled (line 134): watch: true hardcoded for development mode prevents build from completing

Steps to Reproduce

1. Clone/install Metronic 9.3.4
2. Run npm run build:js
3. Build hangs indefinitely with no output or completion

Fix Applied

1. Make watch mode configurable (line 134):

Before: watch: env.production ? false : true,

After: watch: env.watch || false,

2. Remove duplicate CSS loader (lines 174-181):

Before (two conflicting rules): { test: /.css$/i, use: ["style-loader", "css-loader", "postcss-loader"], }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], },

After (single rule): { test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], }

3. Add watch script to package.json:

"scripts": { "build:js": "webpack --mode=development", "build:js:watch": "webpack --mode=development --env watch", ... }

Result

• npm run build:js - Completes successfully in ~1.7s
• npm run build:js:watch - Runs in watch mode for development
• npm run build:prod - Completes successfully in ~4.3s

Recommendation

The default build:js command should complete and exit (for CI/CD), with a separate build:js:watch command for development file watching, matching the pattern already used for CSS (build:css vs build:css:watch).