Next.js npm install error while deploying

Troubleshooting and help
,
1 
Build ready to start ▶️
>> Cloning github.com/Produx-Studio/sharai-cms.git commit sha 75c40e297a1ab173d1ef88144d8680f806b1fb50 into /workspace
Initialized empty Git repository in /workspace/.git/
From https://github.com/Produx-Studio/sharai-cms
 * branch            75c40e297a1ab173d1ef88144d8680f806b1fb50 -> FETCH_HEAD
HEAD is now at 75c40e2 responsive new product
Previous image with name "registry01.prod.koyeb.com/k-329b0262-d5db-4ebd-9816-21e56d4b8895/bba9ebbd-2e9e-48a6-9bea-2ca714a30e59:latest" not found
Layer cache not found
e[0me[1me[35m
[Heroku Node.js Engine Buildpack]
e[0me[0me[1me[35m
[Checking Node.js version]
e[0mDetected Node.js version range: *
Resolved Node.js version: 20.5.1
e[0me[1me[35m
[Installing Node.js distribution]
e[0mDownloading Node.js 20.5.1
Extracting Node.js 20.5.1
Installing Node.js 20.5.1
[INFO] Installing toolbox
[INFO] - yj
[INFO] Using npm v9.8.0 from Node
[INFO] Installing node modules
npm WARN config production Use `--omit=dev` instead.
npm notice 
npm notice New major version of npm available! 9.8.0 -> 10.2.4
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.4>
npm notice Run `npm install -g npm@10.2.4` to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: cms@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from use-image-color@0.0.9
npm ERR! node_modules/use-image-color
npm ERR!   use-image-color@"^0.0.9" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/koyeb/.npm/_logs/2023-11-29T10_05_55_730Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/koyeb/.npm/_logs/2023-11-29T10_05_55_730Z-debug-0.log
e[31;1mERROR: e[0mfailed to build: exit status 1
exit status 51
2

Hello Ali,

It appears our builder is unable to install your npm dependencies. Can you share your package.json file?

3 
{
  "name": "cms",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/themes": "^2.0.1",
    "@xata.io/client": "^0.27.0",
    "axios": "^1.6.2",
    "bcrypt": "^5.1.1",
    "classnames": "^2.3.2",
    "jsonwebtoken": "^9.0.2",
    "next": "14.0.3-canary.7",
    "react": "^18",
    "react-color-palette": "^7.1.0",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "use-image-color": "^0.0.9",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "daisyui": "^4.0.3",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
4

The problem comes from the dependency use-image-color, which depends on react version 16, but your package.json requires react 18.

The problem is not specific to Koyeb. To reproduce the issue locally, run npm install in a directory containing the package.json above and you’ll notice the issue. If you remove use-image-color from dependencies, the installation succeeds.

5

I used pnpm so it worked fine, but I have tried npm and the issue appeared.
Is there a way to fix the issue without removing use-image-color package?

Thank you

6

Update the file package.json to add "packageManager": "pnpm@8.11.0". It should work!

{
  "name": "cms",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "packageManager": "pnpm@8.11.0",
  "dependencies": {
    "@radix-ui/themes": "^2.0.1",
    "@xata.io/client": "^0.27.0",
    "axios": "^1.6.2",
    "bcrypt": "^5.1.1",
    "classnames": "^2.3.2",
    "jsonwebtoken": "^9.0.2",
    "next": "14.0.3-canary.7",
    "react": "^18",
    "react-color-palette": "^7.1.0",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "use-image-color": "^0.0.9",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "daisyui": "^4.0.3",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}