Unable to deploy React app with Vercel "sh: webpack: command not found'-CodePudding

I have a frontend React app deployed with Vercel, the repo is on Github. Previously all the process was fine, every time I push some update on the repo Vercel redeploys it and my website was up-to-date.

But now the deployment crash returning error sh: webpack: command not found. I don't understand because webpack is present in devDependencies on my package.json, on my machine everything works well from npm i, npm run build and npm run dev.

I understand that during the build process of Vercel despite that installation went well, the build command crash with error 127 couldn't find webpack.

Logs from Vercel:

Previous build cache not available
Cloning completed: 695.423ms
Not using Build Cache
Running "vercel build"
Vercel CLI 28.4.15
Running "install" command: `npm i`...
added 46 packages, and audited 47 packages in 4s
1 package is looking for funding
  run `npm fund` for details
found 0 vulnerabilities
> [email protected] build
> echo 'Building webpack dist folder' && rm -rf dist && webpack --mode production --env production
Building webpack dist folder
sh: webpack: command not found
Error: Command "npm run build" exited with 127

Package.json:

{
  "name": "konflx-todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "echo 'Building webpack dist folder' && rm -rf dist && webpack --mode production --env production",
    "dev": "webpack serve --config webpack.config.js",
    "testDev": "webpack-dev-server --https"
  },
  "keywords": [],
  "author": "konflex",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "babel-preset-react": "^6.24.1",
    "bulma": "^0.9.4",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.4.0",
    "mini-css-extract-plugin": "^2.6.1",
    "sass": "^1.56.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@iconicicons/react": "^1.5.0",
    "@loadable/component": "^5.15.0",
    "classnames": "^2.3.1",
    "dotenv": "^16.0.0",
    "framer-motion": "^7.3.5",
    "rc-pagination": "^3.1.17",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^5.3.0",
    "uuid": "^8.3.2"
  }
}

My machine run on node v18.12.1 and npm 8.19.2, I updated both recently. I downgrade then for the same result. Any clue ?

CodePudding user response：

In Vercel when you pass --mode production in webpack the devDependencies are not installed. By just calling webpack it solved the issue. If you want to use production mode, you must install all devDependencies to be able to build your project.