I'm encountering errors when deploying my ThreeJS-Prismic Next.js app on Vercel. After a failed deployment, I ran the build locally and got the following output:

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 log 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.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 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]

The project’s package.json is as follows:

JSONCopied
{
  "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"
  }
}

I believe the issue might be related to peer dependency conflicts between versions of react and @react-three/fiber/@react-three/drei.

Has anyone encountered a similar problem or have suggestions for resolving these conflicts?