I am currently enrolled in a course on DjangoRest and React. While I have experience with npm and Python, I have encountered an error that I am unable to resolve. Everything was going smoothly until I ran "npm run dev."
package.json file
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/preset-env": "^7.13.15",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.34.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"react-router-dom": "^5.2.0"
}
}
webpack.config.js file
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
};
Error
npm run dev
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f0e4f9f8e2f3f8f2d6a7b8a6b8a6">[email protected]</a> dev E:\Programacion cursos\Harvard\React&JavaScript\VsCode\react_django\frontend
> webpack --mode development --watch
"JavaScript\VsCode\react_django\frontend\node_modules\.bin\" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'E:\Programacion cursos\Harvard\webpack\bin\webpack.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cfdbc6c7ddccc7cde99887998799">[email protected]</a> dev: `webpack --mode development --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a2b6abaab0a1aaa084f5eaf4eaf4">[email protected]</a> 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:
I believe the issue lies in the location where npm is searching for the webpack.js file. The current path of webpack.js is "E:\Programacion cursos\Harvard\React&JavaScript\VsCode\react_django\frontend\node_modules\webpack\bin\webpack.js" but for some reason, it is looking for the module in "E:\Programacion cursos\Harvard\webpack\bin\webpack.js."
I want to change the search path for the webpack module, but I am unsure how to do so. I have tried using "npm link webpack" followed by "npm unlink webpack" to reinstall it, but it did not resolve the issue. If anyone knows how to fix this problem, please offer assistance. Thank you!
Edit I have fixed one of the issues by changing the "node_module\.bin" folder to "node_module\bin."
Within "node_modules," the "graceful-fs" module is present. What steps can I take next? The error message reads:
Error: Cannot find module 'graceful-fs'
Require stack:
- C:\Users\matia\AppData\Roaming\npm\node_modules\webpack\bin\webpack.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\matia\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:77:13)
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\\matia\\AppData\\Roaming\\npm\\node_modules\\webpack\\bin\\webpack.js'
]