ThreeJS-Prismic App Failed When I tried to Deploy on Vercel. Can anyone help with this?

After the deployment failed on Vercel, I tried to build on my terminal and this is the result:

npm run build

> nextjs-starter-prismic-minimal@0.1.0 build
> next build

** ▲ Next.js 15.1.2**

** Creating an optimized production build …**
Failed to compile.

./node_modules/@react-three/drei/core/Environment.js + 8 modules
Unexpected end of JSON input

./node_modules/@prismicio/react/dist/SliceZone.js + 1 modules
Unexpected end of JSON input

> Build failed because of webpack errors

This is the error Vercel returned

[20:33:33.188] Running build in Washington, D.C., USA (East) – iad1
[20:33:33.298] Cloning github.com/SheIsBukki/prismic-gsap-threejs-fizzi (Branch: main, Commit: 9be43f6)
[20:33:33.781] Previous build cache not available
[20:33:33.866] Cloning completed: 568.236ms
[20:33:34.226] Running “vercel build”
[20:33:34.834] Vercel CLI 39.2.5
[20:33:35.202] Installing dependencies…
[20:33:39.261] npm warn ERESOLVE overriding peer dependency
[20:33:39.263] npm warn While resolving: @react-spring/three@9.7.5
[20:33:39.263] npm warn Found: @react-three/fiber@9.0.0-alpha.8
[20:33:39.263] npm warn node_modules/@react-three/fiber
[20:33:39.263] npm warn @react-three/fiber@“^9.0.0-alpha.8” from the root project
[20:33:39.263] npm warn 1 more (@react-three/drei)
[20:33:39.263] npm warn
[20:33:39.263] npm warn Could not resolve dependency:
[20:33:39.263] npm warn peer @react-three/fiber@“>=6.0” from @react-spring/three@9.7.5
[20:33:39.263] npm warn node_modules/@react-spring/three
[20:33:39.263] npm warn @react-spring/three@“~9.7.5” from @react-three/drei@9.120.5
[20:33:39.263] npm warn node_modules/@react-three/drei
[20:33:39.263] npm warn
[20:33:39.263] npm warn Conflicting peer dependency: @react-three/fiber@8.17.10
[20:33:39.263] npm warn node_modules/@react-three/fiber
[20:33:39.264] npm warn peer @react-three/fiber@“>=6.0” from @react-spring/three@9.7.5
[20:33:39.264] npm warn node_modules/@react-spring/three
[20:33:39.264] npm warn @react-spring/three@“~9.7.5” from @react-three/drei@9.120.5
[20:33:39.264] npm warn node_modules/@react-three/drei
[20:33:39.411] npm error code ERESOLVE
[20:33:39.412] npm error ERESOLVE could not resolve
[20:33:39.412] npm error
[20:33:39.413] npm error While resolving: @react-three/fiber@9.0.0-alpha.8
[20:33:39.413] npm error Found: react@18.3.1
[20:33:39.413] npm error node_modules/react
[20:33:39.413] npm error react@“^18.3.1” from the root project
[20:33:39.413] npm error react@“>=16” from @gsap/react@2.1.1
[20:33:39.413] npm error node_modules/@gsap/react
[20:33:39.415] npm error @gsap/react@“^2.1.1” from the root project
[20:33:39.415] npm error 29 more (@prismicio/next, @prismicio/react, …)
[20:33:39.416] npm error
[20:33:39.416] npm error Could not resolve dependency:
[20:33:39.416] npm error peer react@“>=19.0” from @react-three/fiber@9.0.0-alpha.8
[20:33:39.416] npm error node_modules/@react-three/fiber
[20:33:39.416] npm error @react-three/fiber@“^9.0.0-alpha.8” from the root project
[20:33:39.416] npm error peer @react-three/fiber@“^8 || ^9.0.0-0” from @react-three/drei@9.120.5
[20:33:39.416] npm error node_modules/@react-three/drei
[20:33:39.416] npm error @react-three/drei@“^9.120.5” from the root project
[20:33:39.416] npm error 1 more (r3f-perf)
[20:33:39.416] npm error
[20:33:39.416] npm error Conflicting peer dependency: react@19.0.0
[20:33:39.417] npm error node_modules/react
[20:33:39.417] npm error peer react@“>=19.0” from @react-three/fiber@9.0.0-alpha.8
[20:33:39.417] npm error node_modules/@react-three/fiber
[20:33:39.417] npm error @react-three/fiber@“^9.0.0-alpha.8” from the root project
[20:33:39.417] npm error peer @react-three/fiber@“^8 || ^9.0.0-0” from @react-three/drei@9.120.5
[20:33:39.417] npm error node_modules/@react-three/drei
[20:33:39.417] npm error @react-three/drei@“^9.120.5” from the root project
[20:33:39.417] npm error 1 more (r3f-perf)
[20:33:39.417] npm error
[20:33:39.417] npm error Fix the upstream dependency conflict, or retry
[20:33:39.417] npm error this command with --force or --legacy-peer-deps
[20:33:39.417] npm error to accept an incorrect (and potentially broken) dependency resolution.
[20:33:39.418] npm error
[20:33:39.418] npm error
[20:33:39.418] npm error For a full report see:
[20:33:39.418] npm error /vercel/.npm/_logs/2025-01-07T19_33_36_543Z-eresolve-report.txt
[20:33:39.418] npm error A complete log of this run can be found in: /vercel/.npm/_logs/2025-01-07T19_33_36_543Z-debug-0.log
[20:33:39.436] Error: Command “npm install” exited with 1
[20:33:40.156]

And this are the installed packages in the project:

{
  "name": "nextjs-starter-prismic-minimal",
  "version": "0.1.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@prismicio/client": "^7.13.1",
    "@prismicio/next": "^1.7.1",
    "@prismicio/react": "^2.9.1",
    "@react-three/drei": "^9.120.5",
    "@react-three/fiber": "^9.0.0-alpha.8",
    "@types/three": "^0.171.0",
    "clsx": "^2.1.1",
    "force": "^0.0.3",
    "gsap": "^3.12.5",
    "mine": "^0.1.0",
    "next": "15.1.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "request": "^2.88.2",
    "three": "^0.172.0",
    "zustand": "^5.0.2"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.61",
    "@types/node": "^22.8.6",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "autoprefixer": "^10.4.20",
    "concurrently": "^9.0.1",
    "eslint": "^9.13.0",
    "eslint-config-next": "^15.0.2",
    "postcss": "^8.4.49",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "r3f-perf": "^7.2.3",
    "slice-machine-ui": "^2.11.1",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.6.3"
  }
}

Hello,

You’re encountering appears to be related to dependency conflicts and package version mismatches. Specifically, the error seems to be stemming from the versions of @react-three/fiber and react you’re using in your project.

Peer Dependency Conflicts: The error logs show a peer dependency conflict between react@18.3.1 (which your project is using) and @react-three/fiber@9.0.0-alpha.8, which requires react@19.0.0. Since you are using an alpha version of @react-three/fiber, it might not be compatible with the version of react you are using

Try upgrading your React version to 19.0.0 or switch to a stable version of @react-three/fiber that works with React 18. You can check the documentation or release notes of @react-three/fiber to find the stable version compatible with React 18.
Using --legacy-peer-deps: If upgrading the dependencies doesn’t work or isn’t an option, you can try installing the dependencies using the --legacy-peer-deps flag. This will ignore the peer dependency conflicts and attempt to resolve the dependencies regardless.

Run the following command in your terminal: npm install --legacy-peer-deps
This should help bypass the conflicts and proceed with the installation.

Clean Install: Another approach is to completely remove the node_modules folder and package-lock.json file and then reinstall the dependencies.

rm -rf node_modules
rm package-lock.json
npm install
Check the Version Compatibility: Ensure that the versions of packages like @react-three/fiber, @react-three/drei, and react are all compatible with each other. Sometimes, upgrading one package can cause other packages to break due to version mismatches.

Vercel Build Cache Issue: The build cache on Vercel might be causing issues. You can try clearing the Vercel build cache by redeploying without using the previous build cache.

In the Vercel dashboard, you can redeploy the project with the option to “Clear Cache” during the redeployment process.

Thanks for your reply. I have tried this multiple times before posting here
rm -rf node_modules
rm package-lock.json
npm install

Also, please scroll up to where I posted the packages in the project. I am using react@19. I was initially using react@18 but I upgraded to 19 after the first build error.

I also tried to redeploy on Vercel without checking Use existing build cache, and it’s pretty much the same errors

UPDATE

Vercel build successful after downgrading all packages, I downgraded to NextJS14, React 18.3, React-dom 18.3 and generally downgraded all applicable packages to older versions. And that resolved the issue.

{
  "name": "nextjs-starter-prismic-minimal",
  "version": "0.1.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@prismicio/client": "^7.11.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "@react-three/drei": "^9.111.3",
    "@react-three/fiber": "^8.17.6",
    "@types/three": "^0.167.2",
    "clsx": "^2.1.1",
    "gsap": "^3.12.5",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "three": "^0.167.1",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.46",
    "@types/node": "^20.14.2",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.20",
    "concurrently": "^8.2.2",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.4",
    "postcss": "^8.4.41",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.6",
    "r3f-perf": "^7.2.1",
    "slice-machine-ui": "^2.5.0",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.4.5"
  }
}

Although running npm run build still generate the same errors, and I can live with that as long as the code works in production

npm run build

nextjs-starter-prismic-minimal@0.1.0 build
next build

▲ Next.js 14.2.23

Creating an optimized production build …
Failed to compile.

./node_modules/@react-three/drei/core/Environment.js + 8 modules
Unexpected end of JSON input

./node_modules/@prismicio/react/dist/SliceZone.js + 1 modules
Unexpected end of JSON input

Build failed because of webpack errors