0
I’m new in Act.js, well the point is I can’t find the solution to the problem below, I’ve tried other versions of Node.js and webpack-dev-server itself, but also unsuccessfully.
This is my webpack.config.js file:
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: './src/index.jsx',
output: {
path: __dirname + '/public',
filename: './app.js'
},
devServer: {
port: 8080,
contentBase: './public',
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
modules: __dirname + '/node_modules'
}
},
plugins: [
new ExtractTextPlugin('app.css')
],
module: {
loaders: [{
test: /.js[x]?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.woff|.woff2|.ttf|.eot|.svg*.*$/,
loader: 'file'
}]
}
}
This is my package.json file:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --progress --colors --inline --hot",
"production": "webpack --progress -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.21.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.2",
"babel-plugin-react-html-attrs": "^3.0.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.6.0",
"css-loader": "^5.1.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"font-awesome": "^4.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"style-loader": "^2.0.0",
"webpack": "^5.24.3",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
Here’s the mistake I couldn’t fix:
npm run dev
> [email protected] dev C:\Users\Felipe\Desktop\todoApp\frontend
> webpack-dev-server --progress --colors --inline --hot
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Felipe\Desktop\todoApp\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\Felipe\Desktop\todoApp\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\\Felipe\\Desktop\\todoApp\\frontend\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --progress --colors --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Felipe\AppData\Roaming\npm-cache\_logs\2021-03-05T13_32_24_819Z-debug.log