Getting webpack error after update to version 5 from 3 - npm

Question

I recently moved from webpack 3 to 5 and made some changes as per the suggestions, however after this upgrade, build fails and server won't start. here is my webpack file
const path = require('path')
const webpack = require('webpack')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const libraryBaseStyles = glob.sync('./library/basics/**/styles.scss')
const libraryAllStyles = glob.sync('./library/**/styles.scss', {
ignore: ['./library/basics/**/styles.scss'],
})
const isProd = process.env.NODE_ENV === 'production'
let externals = []
let rules = []
let entries = {}
let pluginsBabel = ['transform-runtime', 'lodash']
let plugins = [
new ExtractTextPlugin({
// define where to save the file
filename: 'css/[name].css',
allChunks: true,
}),
]
let output = {
path: path.resolve(__dirname, isProd ? './dist' : './public'),
filename: 'js/[name].js',
}
if (isProd) {
plugins.push(
new OptimizeCssAssetsPlugin({
assetNameRegExp: /index.css$/g,
cssProcessor: require("cssnano"),
cssProcessorOptions: {
discardComments: { removeAll: true },
autoprefixer: {
browsers: ["last 2 versions", "Safari > 8"],
add: true,
},
},
canPrint: true,
}),
new webpack.ContextReplacementPlugin(
/moment[\/\\]locale$/,
/(fr\.js|nl-be|nl\.js|en-gb|de\.js)/
),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
}),
new FileManagerPlugin({
onEnd: {
copy: [
{ source: "dist/css/index.css", destination: "dist/css/index.scss" },
{ source: "public/fonts", destination: "dist/fonts" },
],
},
})
);
entries.index = libraryBaseStyles
.concat(libraryAllStyles)
.concat(['./library/index.js'])
// https://webpack.js.org/guides/author-libraries/
output.library = 'nmbs-redesign-website'
output.libraryTarget = 'umd'
externals = [
'autosize',
// 'babel-polyfill',
'gsap',
'hammerjs',
'imagesloaded',
'inputmask',
'masonry-layout',
'moment',
'packery',
'picturefill',
'pikaday',
'prismjs',
'promise-polyfill',
'scrollmonitor',
'whatwg-fetch',
'wicg-inert',
]
} else {
rules.push({
test: /\.svg$/,
include: path.join(__dirname, './library/basics/Icons'),
loaders: [
'svg-sprite-loader?' +
JSON.stringify({
name: 'icon-[name]',
prefixize: true,
}),
'svgo-loader?' +
JSON.stringify({
plugins: [
{removeTitle: true},
{convertPathData: false},
{removeUselessStrokeAndFill: true},
],
}),
],
})
plugins.push(new webpack.LoaderOptionsPlugin({options: {}}))
entries.library = libraryBaseStyles
.concat(libraryAllStyles)
.concat(['./library/index.js'])
entries.docs = glob.sync('./docs/**/styles.scss').concat(['./docs/index.js'])
}
rules.push(
{
test: /\.js$/,
// Default
// exclude: [path.resolve(__dirname, 'node_modules')],
// Specific
include: [
path.resolve(__dirname, 'library'),
path.resolve(__dirname, 'docs'),
path.resolve(__dirname, 'node_modules/dom7'),
path.resolve(__dirname, 'node_modules/ssr-window'),
path.resolve(__dirname, 'node_modules/swiper'),
],
loader: 'babel-loader',
query: {
plugins: pluginsBabel,
presets: [
[
'env',
{
targets: {
browsers: ['last 2 versions', 'Safari > 8'],
},
debug: true,
useBuiltIns: true,
},
],
'latest',
'stage-2',
],
},
},
// Loaders for other file types can go here
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{loader: 'css-loader', options: {url: false}},
{loader: 'sass-loader'},
],
}),
}
)
console.log('\nWebpack ' + process.env.NODE_ENV + '\n (isProd: ' + isProd + ')')
module.exports = {
entry: entries,
output: output,
externals: externals,
module: {
rules: rules,
},
plugins: plugins,
devtool: isProd ? "source-map" : "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "public/"),
compress: true,
overlay: true,
inline: false,
port: 3000,
},
};
my Package.json
"name": "es6-library",
"version": "6.0.15",
"description": "Pattern Library",
"main": "dist/js/index.js",
"module": "library/index.js",
"scripts": {
"docs": "gulp watch:docs",
"nj": "gulp nunjucks",
"dev": "cross-env NODE_ENV=local webpack serve",
"build": "cross-env NODE_ENV=local ./node_modules/.bin/webpack && npm run versions",
"build-prod": "cross-env NODE_ENV=production ./node_modules/.bin/webpack && npm run versions",
"dist": "cross-env NODE_ENV=production ./node_modules/.bin/webpack && npm run versions",
"versions": "node -p \"process.env.npm_package_version\" > ./public/version-npm.txt && node -p \"require('moment')().format('MMM/DD/YYYY HH:mm')\" > ./public/version.txt",
"optimizesvg": "find ./library/basics/Icons -name '*.svg' -exec ./node_modules/.bin/svgo {} \\;",
"build-push-staging": "npm run build && git add . && git commit -m \"build `date +\"%d/%m/%Y\"`\" && git push",
"build-push-test": "npm run build && git add . && git commit -m \"require('moment')().format('MMM/DD/YYYY')\" && git push origin origin/test",
"build-for-release": "npm run build-prod && npm run dist && git add . && git commit -m \"compile dist \"require('moment')().format('MMM/DD/YYYY')\"",
"build-for-Deploy": "npm run build && git add . && git commit -m \"build \"require('moment')().format('MMM/DD/YYYY')\"",
"build-push-production": "npm run build-for-Deploy && git push",
"dist-push-production": "npm run build-for-release && git push && npm publish"
},
"author": "Amit",
"license": "ISC",
"dependencies": {
"autosize": "^4.0.2",
"babel-polyfill": "^6.26.0",
"fuse.js": "^6.4.6",
"gsap": "^3.6.1",
"hammerjs": "^2.0.8",
"imagesloaded": "^4.1.4",
"inputmask": "4.0.9",
"masonry-layout": "^4.2.2",
"moment": "^2.26.0",
"node-sass": "^5.0.0",
"packery": "^2.1.2",
"picturefill": "^3.0",
"prismjs": "^1.15.0",
"promise-polyfill": "^8.0",
"scrollmonitor": "^1.2",
"swiper": "^4.4.1",
"whatwg-fetch": "^2.0.4",
"wicg-inert": "^2.0"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-loader": "^7.1.5",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.8.0",
"babel-preset-env": "^1.6.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"cssnano": "^5.0.2",
"eslint": "^4.19.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"filemanager-webpack-plugin": "^4.0.0",
"glob": "^7.1.3",
"gulp": "^3.9.1",
"gulp-nunjucks-render": "git+https://github.com/carlosl/gulp-nunjucks-render.git",
"gulp-plumber": "^1.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"sass-loader": "6.0.7",
"style-loader": "^0.21.0",
"svg-sprite-loader": "0.3.1",
"svgo": "^1.1.1",
"svgo-loader": "^2.2.0",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
}
}
this is the error i am getting when i try to start the server(npm run dev)
Webpack local
(isProd: false)
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.module.rules[2] should be one of these:
["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?,
mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?,
use? }, ...]
-> A rule.
Details:
configuration.module.rules[2].loader should be a non-empty string.
-> A loader request.