Upraded Webpack 4 to 5 : Build stalls at 10% building 0/1 entries 1/1 dependencies 0/1 modules - node.js

Question

I am upgrading my webpack from 4 to 5 , when i run webpack command
webpack --progress --config webpack.config.js
the progress stalls at
Build stalls at 10% building 0/1 entries 1/1 dependencies 0/1 modules.
This was working fine till i was using webpack 4. I have updated the rules as per the new format for respective headers. THer is no error or warning that printed on the console. It just stalls.
Please find my package.json file
{
"name": "deploy",
"version": "0.0.0",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"axios": "^0.21.1",
"backbone": "1.2.3",
"bootstrap": "^4.5.3",
"bootstrap-select": "^1.13.12",
"d3": "^3.3.11",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"file-saver": "1.3.3",
"formsy-react": "0.19.5",
"globalize": "^1.4.2",
"highcharts": "^9.1.0",
"intl-tel-input": "^17.0.12",
"jquery": "^3.5.1",
"jquery-contextmenu": "2.7.1",
"jquery-jsonview": "1.2.3",
"jstree": "3.3.7",
"leaflet": "1.3.4",
"less": "2.3.1",
"moment": "^2.29.1",
"noVNC": "git://github.com/novnc/noVNC.git#v0.6.2",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"rc-slider": "8.6.9",
"react": "^16.13.1",
"react-codemirror": "1.0.0",
"react-custom-scrollbars": "4.2.1",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^16.13.1",
"react-dropzone": "3.13.4",
"react-json-editor-ajrm": "^2.5.13",
"react-modal": "^3.11.2",
"react-redux": "^7.2.1",
"react-table": "^7.7.0",
"react-tabs": "^3.1.1",
"react-tag-autocomplete": "^6.1.0",
"react-tagsinput": "^3.19.0",
"react-transition-group": "1.2.0",
"react-widgets": "^4.4.11",
"react-widgets-globalize": "^5.0.20",
"react-widgets-moment": "^4.0.27",
"recharts": "^2.0.0-beta.1",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"save": "^2.4.0",
"text-security": "^1.2.0",
"why-did-you-update": "^1.0.8"
},
"browserslist": [
"defaults",
"ie >= 9",
"Firefox >= 45",
"Chrome >= 48",
"Safari >= 10"
],
"devDependencies": {
"#babel/cli": "7.14.3",
"#babel/core": "7.14.3",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-proposal-decorators": "7.1.6",
"#babel/plugin-proposal-object-rest-spread": "7.0.0",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"#babel/preset-stage-1": "7.0.0-beta.40",
"#storybook/react": "^6.2.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "8.2.2",
"babel-plugin-transform-decorators-legacy": "1.3.5",
"copy-webpack-plugin": "^9.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"dust-loader": "1.3.0",
"dustjs-helpers": "1.7.4",
"dustjs-linkedin": "^2.7.5",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^1.7.0",
"expose-loader": "0.7.5",
"file-loader": "2.0.0",
"jest": "^26.6.3",
"less-loader": "4.1.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "1.6.0",
"npm-run-all": "4.1.5",
"raw-text-loader": "0.1.1",
"replace-hash-in-file-webpack-plugin": "1.0.8",
"scriptjs": "2.5.9",
"style-loader": "0.23.1",
"unused-files-webpack-plugin": "^3.4.0",
"url-loader": "1.1.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
},
Here is the webpack file
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ReplaceHashInFileWebpackPlugin = require('replace-hash-in-file-webpack-plugin');
const brandingDefinePlugin = require('./configs/plugins');
const env = process.env.NODE_ENV;
const config = {
entry: [
"./src/main/webapp/app/scripts/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: env !== "development" ? '[name]-[hash].js' : '[name]-dev.js'
},
module: {
rules: [
{
test:/\.m?js$/,
loader: "babel-loader",
options:{
exclude: /(node_modules|bower_components)/,
compact: false
}
//query: {compact: false}
},
{
test: /\.dust$/,
use: [{
loader: "dust-loader",
options: {
rootDir: './src/main/webapp/app/scripts/templates'
}
}]
},
{
test: require.resolve('highcharts'),
use: [{
loader: 'expose-loader',
options: 'Highcharts'
}]
},
{
test: require.resolve('underscore'),
use: [{
loader: 'expose-loader',
options: '_'
}]
},
{
test: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
use: [{
loader: 'expose-loader',
options: 'app'
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
//importLoaders: 1,
sourceMap: env === 'development',
url: false,
//context: '../',
}
},
]
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: [{
loader: 'file-loader?name=../../images/[name].[ext]'
}]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
use: [{
loader: 'url-loader?name=fonts/[name].[ext]'
}]
//loader: 'url-loader?name=fonts/[name].[ext]'
},
]
},
stats: {
colors: true,
errorDetails: true
},
externals: {
'jquery': 'jQuery'
},
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', 'bower_components'],
descriptionFiles: ['package.json', 'bower.json'],
alias: {
'jquery-i18n': path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/jquery.i18n.properties-1.0.9"),
'jquery-ui': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery-ui'),
"bootstrap-datetimepicker": path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/bootstrap-datetimepicker.min"),
mousewheel: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.mousewheel'),
atmosphere: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery.atmosphere/jquery.atmosphere'),
x2js: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/xml2json.min'),
helpers: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers'),
jscrollpane: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jscrollpane'),
jqgridlocale: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/grid.locale-en'),
'jqgrid': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jqGrid.js'),
idleTimer: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/idle-timer.min'),
'jquery-tag-it': path.resolve(__dirname,'./src/main/webapp/app/bower_components/jquery-tagit/js/tag-it'),
jsonview: path.resolve(__dirname, './node_modules/jquery-jsonview/dist/jquery.jsonview'),
gridster: path.resolve(__dirname, './src/main/webapp/app/bower_components/gridster/src/jquery.gridster.js'),
'jquery-ui-multiselect-widget': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.multiselect'),
'file-saver': path.resolve(__dirname, './node_modules/file-saver/FileSaver.min'),
jqueryTimeDuration: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery-time-duration-picker/src/jquery-time-duration-picker'),
'jQuery-contextMenu': path.resolve(__dirname, './src/main/webapp/app/bower_components/jQuery-contextMenu/dist/jquery.contextMenu.js'),
applicationTemplates: path.resolve(__dirname, './src/main/webapp/app/scripts/applicationTemplates'),
dust: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/dust'),
'dust.core': 'dustjs-linkedin',
'dust.parse': path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/parser'),
dustCompiler: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/compiler'),
dustHelpers: 'dustjs-helpers',
app: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
routes: path.resolve(__dirname, './src/main/webapp/app/scripts/routes'),
collections: path.resolve(__dirname, './src/main/webapp/app/scripts/collections'),
views: path.resolve(__dirname, './src/main/webapp/app/scripts/views'),
models: path.resolve(__dirname, './src/main/webapp/app/scripts/models'),
schemas: path.resolve(__dirname, './src/main/webapp/app/scripts/schemas'),
templates: path.resolve(__dirname, './src/main/webapp/app/scripts/templates'),
controllers: path.resolve(__dirname, './src/main/webapp/app/scripts/controllers'),
'custom-form-elements': path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/custom-form-elements'),
js: path.resolve(__dirname, './src/main/webapp/app/js'),
bubble_chat: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/bubble_chat'),
leaflet: path.resolve(__dirname, './src/main/webapp/app/bower_components/leaflet/leaflet'),
MarkerCluster: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/MasterCluster-src'),
jstree: path.resolve(__dirname, './node_modules/jstree/dist/jstree.min'),
geosearch: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.control.geosearch'),
openstreetmap: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap'),
googleProvider: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.google'),
'intl-tel-input': path.resolve(__dirname, './node_modules/intl-tel-input/build/js/intlTelInput-jquery.min'),
adapter: path.resolve(__dirname, './src/main/webapp/app/scripts/adapter'),
next: path.resolve(__dirname, './src/main/webapp/app/scripts/next'),
spin: path.resolve(__dirname, './src/main/webapp/app/bower_components/spin/'),
'fileSaver': path.resolve(__dirname, './node_modules/file-saver/FileSaver'),
'vApiClient': path.resolve(__dirname, './src/main/webapp/app/api/vApiClient'),
vendorUtils: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/utils')
}
},
resolveLoader: {
alias: { "text": "raw-text-loader" }
},
mode: env,
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
context: __dirname
}
}),
new webpack.ProvidePlugin({
_: 'underscore',
dust: 'dustjs-linkedin',
jQuery: 'jquery',
$: 'jquery',
_ld:'lodash'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new MiniCssExtractPlugin({
filename: env !== "development" ? 'styles/css/main-[hash].css' : 'styles/css/main-dev.css'
}),
new ReplaceHashInFileWebpackPlugin([{
dir: 'build',
files: ['index.jsp'],
rules: [{
search: /\/main/ig,
replace: env !== "development" ? '/main-[hash]' : '/main-dev'
}]
}])
]
}
if (process.env.npm_config_branding === 'riverbed') {
console.log('******************** Branding : Riverbed *********************',
process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.riverbed.oem);
} else {
console.log('******************** Branding : Versa *********************', process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.versa.oem);
}
if (!process.env.NO_COPY) {
config.plugins.push(new CopyWebpackPlugin({patterns:[
{
from: 'src/main/webapp/app/mock/json/*.json',
to: 'mock/json',
toType: 'dir',
},
{
from: 'src/main/webapp/app/*.jsp',
toType: 'file',
toType: 'dir',
}, {
from: 'src/main/webapp/app/jsp',
to: 'jsp/',
},
{
from: 'src/main/webapp/app/scripts/vendor',
to: 'vendor/',
},
{
from: 'src/main/webapp/app/scripts/vendor/codemirror',
to: 'vendor/codemirror',
},
{
from: 'src/main/webapp/app/scripts/vendor/diff_match_patch',
to: 'vendor/diff_match_patch',
}, {
from: 'src/main/webapp/app/scripts/vendor/next',
to: 'vendor/next',
}, {
from: 'src/main/webapp/app/styles/',
to: 'styles/'
}, {
from: 'src/main/webapp/app/bower_components/',
to: 'bower_components/'
}, {
from: 'src/main/webapp/app/footerName.txt'
}, {
from: 'src/main/webapp/app/favicon.png'
}, {
from: 'src/main/webapp/app/favicon.ico'
}, {
from: 'src/main/webapp/app/404.html'
}, {
from: 'src/main/webapp/app/logoName.txt'
}, {
from: 'src/main/webapp/app/robots.txt'
}, {
from: 'src/main/webapp/app/favicon_original.png'
}, {
from: 'src/main/webapp/app/images/',
to: 'images/'
}, {
from: 'src/main/webapp/app/styles/img/',
to: 'styles/img'
}, {
from: 'node_modules/noVNC',
to: 'vendor/noVNC',
}, {
from: 'src/main/webapp/app/scripts/novnc',
to: 'novnc',
},
{
from: 'node_modules/bootstrap/dist/css',
to: 'styles/css/bootstrap/',
},
{
from: 'node_modules/bootstrap/dist/js',
to: 'bower_components/bootstrap/',
},
{
from: 'node_modules/jquery/dist',
to: 'bower_components/jquery/dist',
},
{
from: 'src/main/webapp/app/scripts/jspScriptHandlers',
to:"jspScriptHandlers"
}]}
))
}
module.exports = config;
Out put of running webpack
ERROR] [webpack.Progress] 10% building
[ERROR] [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
[ERROR] (node:27426) ExperimentalWarning: queueMicrotask() is experimental.
[ERROR] (node:27426) [DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[2].use[0].options)
[ERROR] [webpack.Progress] 10% building import loader ./node_modules/babel-loader/lib/index.js
[ERROR] [webpack.Progress] 10% building 0/1 entries 1/1 dependencies 0/1 modules

Answer 1

Had the same problem and, surprisingly, I've found the resolve.alias option to be the culprit. Removing one particular item from there caused the build to succeed.