CODEWITHSUNDEEP
reactjs
Mazen Al-ali
Mazen Al-ali

Reputation: 3

unable to start project using npm start

its been hours trying to run or start npm server so i can customize my project and preview changes when i use "npm start" command i get this error :

internal/modules/cjs/loader.js:888
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Mazen\Desktop\DigitalMenu\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\Mazen\Desktop\DigitalMenu\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Mazen\\Desktop\\DigitalMenu\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `webpack-dev-server --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start 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\Mazen\AppData\Roaming\npm-cache\_logs\2021-05-16T22_33_30_318Z-debug.log

This is my package.js file:

{
    "private": true,
    "scripts": {
        "start": "webpack-dev-server --mode development",
    "dev": "webpack serve",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.12.13",
        "@babel/preset-react": "^7.12.13",
        "axios": "^0.21.1",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-1": "^6.24.1",
        "bootstrap": "^4.6.0",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0.3",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.9",
        "lodash": "^4.17.20",
        "popper.js": "^1.12",
        "react": "^16.14.0",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.6",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.37.0",
        "webpack-cli": "^4.7.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "@stripe/react-stripe-js": "^1.4.0",
        "@stripe/stripe-js": "^1.13.1",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.32",
        "ng2-charts": "^2.2.5",
        "react-live-preview": "0.0.8-alpha",
        "react-loading-overlay": "^1.0.1",
        "react-native-web": "^0.16.3",
        "react-notification-system": "^0.4.0",
        "react-paypal-button-v2": "^2.6.3",
        "react-paystack": "^3.0.3",
        "react-redux": "^7.2.2",
        "react-responsive-carousel": "^3.2.18",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-spinners": "^0.10.6",
        "react-stripe-checkout": "^2.6.3",
        "react-stripe-elements": "^6.1.2",
        "react-toast-notifications": "^2.4.0",
        "react-toasts": "^3.0.6",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rtl-css-js": "^1.14.1",
        "use-dynamic-refs": "^1.0.0",
        "yarn": "^1.22.10"
    }
}

i have done a research i have changed the "start" script to "webpack serve" but it also gave other errors now am stuck here and not sure what the problem is, Thank you.

Upvotes: 0

Views: 682

Answers (1)

top talent
top talent

Reputation: 599

In your package.js file, there were some bugs.

{
    "private": true,
    "scripts": {
        "start": "webpack-dev-server --mode development"
    }, //<-------------------------------------------------------
    "dev": { //<-----------------------------------------------------
        "webpack serve",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.12.13",
        "@babel/preset-react": "^7.12.13",
        "axios": "^0.21.1",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-1": "^6.24.1",
        "bootstrap": "^4.6.0",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0.3",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.9",
        "lodash": "^4.17.20",
        "popper.js": "^1.12",
        "react": "^16.14.0",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.6",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.37.0",
        "webpack-cli": "^4.7.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "@stripe/react-stripe-js": "^1.4.0",
        "@stripe/stripe-js": "^1.13.1",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.32",
        "ng2-charts": "^2.2.5",
        "react-live-preview": "0.0.8-alpha",
        "react-loading-overlay": "^1.0.1",
        "react-native-web": "^0.16.3",
        "react-notification-system": "^0.4.0",
        "react-paypal-button-v2": "^2.6.3",
        "react-paystack": "^3.0.3",
        "react-redux": "^7.2.2",
        "react-responsive-carousel": "^3.2.18",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-spinners": "^0.10.6",
        "react-stripe-checkout": "^2.6.3",
        "react-stripe-elements": "^6.1.2",
        "react-toast-notifications": "^2.4.0",
        "react-toasts": "^3.0.6",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rtl-css-js": "^1.14.1",
        "use-dynamic-refs": "^1.0.0",
        "yarn": "^1.22.10"
    }
}

If it is not working, try this way.

  1. remove "webpack": "^5.37.0","webpack-cli": "^4.7.0","webpack-dev-server": "^3.11.2" in json file.
  2. npm install --save webpack webpack-cli webpack-dev-server
  3. npm start

If not working again. add this in scripts.

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Upvotes: 1

Related Questions