webpack: not found -When deploying my app to heroku

I am trying to deploy my node.js app to heroku using github but build is keep getting rejected giving error "webpack: not found".Not sure whatelse I am missing in my scripts. 1)I have tried adding node version to my package.json. 2)I do have webpack installed and included in my dev dependencies. 3)I do added "heroku-prebuild": "npm install --dev"to my scripts section to the root of package.json but still no luck. Please see the build log below :-

-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.17.0...
       Using default npm version: 8.15.0
       
-----> Installing dependencies
       Installing node modules
       
       > [email protected] install
       > cd client && npm install
       
       
       added 2 packages, and audited 3 packages in 14s
       
       found 0 vulnerabilities
       
       added 162 packages, and audited 163 packages in 22s
       
       15 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
-----> Build
       Running build
       
       > [email protected] build
       > cd client && npm run build
       
       
       > build
       > webpack --mode production
       
/tmp/build-3dc3f907.sh: 1: webpack: not found
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       Some possible problems:
       
       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Please see the package.json for my client folder

{
  "name": "JATE",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --mode production",
    "start": "webpack --watch"
  },
  "author": "2U",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "http-server": "^0.11.1",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-pwa-manifest": "^4.3.0",
    "workbox-webpack-plugin": "^6.2.4"
  },
  "dependencies": {
    "code-mirror-themes": "^1.0.0",
    "idb": "^6.1.2"
  }
}

Please see the package.json for my root folder

{
  "name": "JATE",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start:dev": "concurrently \"cd server && npm run server\" \"cd client && npm run dev\"",
    "start": "npm run build && cd server && node server.js",
    "server": "cd server nodemon server.js --ignore client",
    "build": "cd client && npm run build",
    "install": "cd client && npm install",
    "client": "cd client && npm start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "if-env": "^1.0.4"
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.4"
  }
}

Solution

You are trying to install your client dependencies via this script in your main package.json:

"install": "cd client && npm install",

But, by default, Heroku doesn't run npm install:

Heroku uses the lockfiles, either the package-lock.json or yarn.lock, to install the expected dependency tree, so be sure to check those files into git to ensure the same dependency versions across environments. If you are using npm, Heroku will use npm ci to set up the build environment.

As a result, your install script isn't being called.

You can configure Heroku to run npm install instead (see below), but before you do that I suggest you consider the impact. npm ci exists for this kind of use case:

This command is similar to npm install, except it's meant to be used in automated environments such as test platforms, continuous integration, and deployment -- or any situation where you want to make sure you're doing a clean install of your dependencies. It can be significantly faster than a regular npm install by skipping certain user-oriented features. It is also more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users.

In short, the main differences between using npm install and npm ci are:

The project must have an existing package-lock.json or npm-shrinkwrap.json.

If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.

npm ci can only install entire projects at a time: individual dependencies cannot be added with this command.

If a node_modules is already present, it will be automatically removed before npm ci begins its install.

It will never write to package.json or any of the package-locks: installs are essentially frozen.

To continue using npm ci, one option is to have your main build script call npm ci in your client folder:

"build": "cd client && npm ci && npm run build",

If you still want to use npm install after reading all of this, set the USE_NPM_INSTALL environment variable to true:

heroku config:set USE_NPM_INSTALL=true

Then redeploy.