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

Bukola · January 7, 2025, 9:10pm

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

My attempts at fixing the issue

rm -r node_modules
rm package.lock.json
npm install --legacy-peer-deps

Errors

Errors returned from my terminal:

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

Errors 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]

Frontend Developer (learning)

Hosting provider

Vercel (Hobby plan)

Package.json file

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

`

### Steps to reproduce

I don't understand this

Ezekiel · January 10, 2025, 11:39am

Hi @Bukola,

Thank you for all this information. The reason this is happening can be located in your error messages: Could not resolve dependency and Conflicting peer dependency indicate the problems seem to arise from conflicting dependency versions and unsupported React/Next.js setups.

React and React-DOM Versions:

react and react-dom are set to ^19.0.0, but React 19 isn't officially released. These likely point to an incorrect or experimental version.
Libraries such as @react-three/fiber, @prismicio/react, and others do not support React 19.

Next.js Version:

next is pinned to 15.1.2, which likely expects stable React 18.x versions.

@react-three/fiber and @react-three/drei:

@react-three/fiber is using an alpha version (9.0.0-alpha.8), which could lead to instability or incompatibility.
These libraries may need to align with a supported version of React.

This is what you can do to fix it:

1. Downgrade React and React-DOM

To align with Next.js and library requirements, install stable React 18.x versions:

npm install react@18.2.0 react-dom@18.2.0

2. Update `@react-three/fiber` and `@react-three/drei`

Use stable versions of these packages:

npm install @react-three/fiber@latest @react-three/drei@latest

3. Remove Alpha/Experimental Dependencies

Replace any alpha or experimental versions (like @react-three/fiber@9.0.0-alpha.8) with stable releases.

4. Clear Node Modules and Cache

Ensure a clean slate to avoid leftover issues:

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

5. Pin Dependencies in `package.json`

Update your package.json with compatible versions. Here’s the corrected version:

{
  "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.123.0",
    "@react-three/fiber": "^8.12.0",
    "@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": "^18.2.0",
    "react-dom": "^18.2.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"
  }
}

6. Test Locally

Build your project locally to confirm the issues are resolved:

npm run build

7. Redeploy to Vercel

Push the updated code to your repository and redeploy. Vercel will automatically install the updated dependencies and attempt to build the project.

This should fix it for you, let me know how that goes

Topic		Replies	Views
Deployment fail Developing with Prismic nextjs	1	655	January 11, 2022
Module not found: Can't resolve '../../slices' when uploading project to Vercel Developing with Prismic nextjs	13	344	October 30, 2023
Prismic+Next.js Netlify deploy Developing with Prismic nextjs	1	485	July 13, 2022
Nextjs Prismic new build API preview build errors Developing with Prismic nextjs , slice-machine	12	1053	October 24, 2023
Prismic sm --setup error Developing with Prismic	7	1101	December 9, 2021