Cannot find module 'copy-webpack-plugin' - react-scripts

Question

I'm upgraded the react-scripts package to 5.0.0. After the upgrade, i ran npm start command and application is broken and getting below error
[webpack-cli] Failed to load 'D:\web\config\webpack.uat.js' config
[webpack-cli] Error: Cannot find module 'copy-webpack-plugin' Require
stack:
D:\web\config\webpack.common.js
D:\web\config\webpack.uat.js
D:\web\node_modules\webpack-cli\lib\webpack-cli.js
D:\web\node_modules\webpack-cli\lib\bootstrap.js
D:\web\node_modules\webpack-cli\bin\cli.js
D:\web\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object. (D:\web\config\webpack.common.js:2:27)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [
'D:\web\config\webpack.common.js',
'D:\web\config\webpack.uat.js',
'D:\web\node_modules\webpack-cli\lib\webpack-cli.js',
'D:\web\node_modules\webpack-cli\lib\bootstrap.js',
'D:\web\node_modules\webpack-cli\bin\cli.js',
'D:\web\node_modules\webpack-dev-server\bin\webpack-dev-server.js'
] } npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR!
web#0.0.0 start: webpack-dev-server --progress --config config/webpack.uat.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed
at the web#0.0.0 start script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above.
installed "webpack-cli": "^4.9.2" and "#webpack-cli/serve": "^1.6.1" too
below is webpack.uat.js file
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const common = require('./webpack.common');
const srcDirectory = path.resolve(__dirname, '../src');
module.exports = merge(common, {
entry: {
main: ['react-hot-loader/patch', path.join(srcDirectory, 'main.js')]
},
resolve: {
alias: {
'react-dom': '#hot-loader/react-dom'
}
},
output: {
filename: '[name].bundle.js',
},
mode: 'development',
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.scss$/,
// exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
},
{
test: /\.css$/,
// exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: srcDirectory,
hot: true,
port: 9000,
historyApiFallback: {
disableDotRule: true
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8080
},
secure: false
},
'/actuator/**': {
target: {
port: 8080
},
secure: false
}
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new Dotenv({
path: path.resolve(__dirname, '../.env.uat')
})
]
});