Webpack dev server - DeprecationWarning: Using 'compiler' as the first argument is deprecated - node.js

Question

I upgraded from webpack dev server 3.11.2 to 4.4.0 and I get these deprecated warnings on npm run dev:
"dev": "webpack serve --config webpack.dev.js",
(node:33156) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument. (node:33156) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods
I don't even have new WebpackDevServer in the configs to be able to change the order of the options and compiler, nor am I using a listen(). I don't get why I am getting these warnings or how to resolve them.
Does anyone know how to resolve these warnings? Thanks!
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const env = process.env.NODE_ENV || 'development';
module.exports = {
output: {
path: path.resolve(__dirname, `dist/${env}`),
filename: '[name]-[fullhash].js',
publicPath: '/', // used for routing
},
resolve: {
modules: [path.resolve(__dirname, './src'), 'node_modules'],
alias: {
components: path.resolve(__dirname, './src/components'),
store: path.resolve(__dirname, './src/store'),
helpers: path.resolve(__dirname, './src/helpers'),
constants: path.resolve(__dirname, './src/constants'),
config: path.resolve(__dirname, './src/config'),
},
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
},
exclude: [/node_modules/],
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.(css|scss|sass)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
hash: true, // cache busting
template: 'public/index.html',
favicon: './public/favicon.ico',
}),
// creates a separate style.css file instead of adding the styles to the bundle.js
new MiniCssExtractPlugin({
filename: '[name].[fullhash].css',
chunkFilename: '[id].[fullhash].css',
}),
new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: [`dist/${env}`] }),
new CopyWebpackPlugin({
patterns: [{ from: 'src/server', to: 'server' }],
}),
],
};
webpack.dev.js
require('dotenv-override').config({ override: true });
const express = require('express');
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const common = require('./webpack.common');
const setupProxy = require('./src/server/proxy');
const loggingEndpoint = require('./src/server/logging/loggingEndpoint');
module.exports = merge(common, {
mode: 'development',
devServer: {
// inline: true, // refreshes the page on change
open: true,
port: 8081,
historyApiFallback: {
index: '/', // used for routing (404 response), and address bar routing
},
onBeforeSetupMiddleware: (server) => {
setupProxy(server.app);
server.app.use(express.json());
server.app.use(express.urlencoded({ extended: true }));
server.app.post('/logging', loggingEndpoint);
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
new BundleAnalyzerPlugin({
analyzerMode: 'disabled', // server mode displays report
}),
],
devtool: 'cheap-module-source-map',
});

Answer 1

I had to upadte other webpack packages and that did it ;)
Old:
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^4.4.0",
"webpack-merge": "^5.7.3"
New:
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0",
"webpack-merge": "^5.8.0"
So just update everything and that did the trick.

Answer 2

Follow the steps under
Solve Option & Compiler https://github.com/heartexlabs/label-studio-frontend/pull/296/commits/ded728c002d510d00d386b5cb5fc84feb977dbad
Solve Listen https://github.com/heartexlabs/label-studio-frontend/pull/296/commits/4305393e86856a19d1e6d3ee7677aa4abbbf4071
Main thread is under https://github.com/heartexlabs/label-studio-frontend/pull/296