1
While trying to execute yarn webpack-dev-server --mode development
the following error appears:
$ C:\Users\Coding\code\frontend\node_modules\.bin\webpack-dev-server --mode development
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Coding\code\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\Coding\code\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\Coding\\code\\frontend\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Follow the contents of package.json
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0"
},
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
Also attached is the contents of webpack.config.js
module.exports ={
entry: path.resolve(__dirname, 'src', 'index.js'),
//Essa é uma forma diferente de inddicar a localização de um arquivo, visto que o windows tem uma forma diferente de mostrá-los, assim evitando erros.
output: {
path: path.resolve(__dirname, 'public'),
filename:'bundle.js'
},
devServer: {
contentBase:path.resolve(__dirname, 'public'),
},
module: {
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:'babel-loader',
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use:[
{loader:'stye-loader'},
{loader:'css-loader'},
]
}
]
},
};
Anyone who can help me, I thank you in advance.