Build failed because of webpack errors while deploying Next.js in heroku-CodePudding

I am trying to deploy the Next,js application to the heroku using heroku CLI. I am getting below issue when i run git push heroku master. Here are the package.json file I have in my current setup. Please help. I have search for the issue but I am not able to find anything related to it. I can build the next.js app in my local machine but not deploy in heroku.

Package.json

 {
"name": "XXXX-ecommerce",
"version": "0.1.0",
"engines": {
  "node": "18.x",
  "npm": "7.x"
},
"private": true,
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "heroku-postbuild": "npm run build",
  "test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
  "@apollo/client": "^3.7.0",
"@nacelle/react-yotpo": "^8.0.0",
"axios": "^1.1.3",
"cookie": "^0.5.0",
"cookie-cutter": "^0.2.0",
"graphql": "^16.6.0",
"lodash": "^4.17.21",
"lodash.filter": "^4.6.0",
"lodash.uniqby": "^4.7.0",
"next": "12.3.1",
"react": "18.2.0",
"react-collapsible": "^2.10.0",
"react-dom": "18.2.0",
"react-rating": "^2.0.5",
"swiper": "^8.4.2"
},
"devDependencies": {
    "eslint": "8.24.0",
    "eslint-config-next": "12.3.1"
}
}

Heroko Build log:

 info  - Creating an optimized production build...
 Failed to compile.
 ./components/card.js
 Module not found: Can't resolve 'lodash.uniqBy' in '/tmp/build_54073365/components'
 Import trace for requested module:
 ./components/card.js
 ./components/productSlider.js
 ./pages/products/[id].js
 Module not found: Can't resolve 'lodash.uniqBy' in 
 '/tmp/build_54073365/pages/products'
   > Build failed because of webpack errors
   -----> Build failed
   
   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/
   
   Love,
   Heroku
   
  !     Push rejected, failed to compile Node.js app.
  !     Push failed

CodePudding user response：

The package name is lodash.uniqby (all lowercase). Check your imports, it looks like you have uniqBy (with a capital B) in one of your components. This probably worked locally because macOS and Windows have case-insensitive filesystems, so it would work locally but not when deployed to a machine running Linux, like on Heroku.