Build failing due to 404 page

Answered

Giant Chinchilla posted this in #help-forum

Giant ChinchillaOP

2024-11-22T06:56:26.305Z

TypeError: Cannot read properties of null (reading 'useRef')
│     at exports.useRef (C:\Users\dev\Documents\garange\node_modules\next\node_modules\react\cjs\react.production.js:519:33)
│     at eq (C:\Users\dev\Documents\garange\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:17570)
│     at renderWithHooks (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4189:18)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4327:14)
│     at retryNode (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
│     at retryNode (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
│ Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
│ TypeError: Cannot read properties of null (reading 'useRef')
│     at exports.useRef (C:\Users\dev\Documents\garange\node_modules\next\node_modules\react\cjs\react.production.js:519:33)
│     at eq (C:\Users\dev\Documents\garange\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:17570)
│     at renderWithHooks (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4189:18)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4327:14)
│     at retryNode (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
│     at retryNode (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
│     at renderElement (C:\Users\dev\Documents\garange\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
│ Export encountered an error on /_error: /404, exiting the build.

my app used to build, but randomly im getting this error. im using this in a turbo monorepo

// apps/web/package.json
"dependencies": {
  "next": "15.0.3",
  "react": "19.0.0-rc-66855b96-20241106",
  "react-dom": "19.0.0-rc-66855b96-20241106",
}

and any package sets the peer dependencies like this:

"peerDependencies": {
  "next": "^15.0.0",
  "react": "^18.0 || ^19.0"
}

this error originated in nextjs 14, i tried updating to nextjs 15 but still get this error

Answered by Belgian Hare

if you roll it back and that fixes it great, but otherwise I'd say you'd need to investigate how you can setup a monorepo that allows for multiple independent versions of react in each sub project

View full answer

114 Replies

Giant ChinchillaOP

2024-11-22T20:34:32.251Z

this really doesn’t make sense to me :(

Belgian Hare

2024-11-22T20:58:44.514Z

It looks like you're trying to import useRef from a place it doesn't exist.

I.E import { useRef } from "not react";

What I'd recommend is checking your 404 page as this is the page mentioned in the stack trace. delete it try and build if it passes that's where error is.

If it doesn't build. try deleting half your app directory building, if it passes that's where error is, if it doesn't half it again and continue.

While this method is slow it gaurentees the page causing the error will be found, remember useRef can't be used inside a server component aswell but I have a suspicion this would be causing a different error if this was the case

@Belgian Hare It looks like you're trying to import `useRef` from a place it doesn't exist. I.E import { useRef } from "not react"; What I'd recommend is checking your 404 page as this is the page mentioned in the stack trace. delete it try and build if it passes that's where error is. If it doesn't build. try deleting half your app directory building, if it passes that's where error is, if it doesn't half it again and continue. While this method is slow it gaurentees the page causing the error will be found, remember useRef can't be used inside a server component aswell but I have a suspicion this would be causing a different error if this was the case

Giant ChinchillaOP

2024-11-22T21:14:14.330Z

src/
├── app/
│   ├── (auth)/
│   │
│   ├── (public)/
│   │
│   ├── api/
│   │
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx

this is my folder structure, even removing not-found.tsx doesnt fix it. navigating to a 404 page doesnt show any errors either

// app/not-found.tsx
"use client";

import { Button } from "@garange/ui/button";
import Link from "next/link";

export default function NotFoundPage() {
  return (
    <div className="flex min-h-[calc(100vh-theme(spacing.20)-theme(spacing.16))] flex-col items-center justify-center p-4 text-center font-sans">
      <h1 className="mb-4 text-4xl font-bold">Oops! Page Not Found</h1>
      <p className="mb-8 text-xl">
        The page you&apos;re looking for doesn&apos;t exist or has been moved.
      </p>
      <Button asChild>
        <Link href="/">Return to Home</Link>
      </Button>
    </div>
  );
}

Giant ChinchillaOP

2024-11-22T21:30:54.287Z

I found https://ptb.discord.com/channels/752553802359505017/1300967949234077807 which is the same issue however that fix doesn't work for me. i even removed localization

Belgian Hare

2024-11-22T22:31:05.682Z

Quick question if you delete your entire app directory

Recreate it with a single page.tsx that just renders hello world

and build does it pass

Giant ChinchillaOP

2024-11-22T22:31:31.853Z

checking rn

with just a blank layout.tsx and page.tsx it still givest he same error

Belgian Hare

2024-11-22T22:34:08.198Z

Just want to be 100% sure, nothing in the app directory is importing anything from elsewhere in the app?

I.E RootLayout, Page, etc are only importing things from "react"

not importing things from "src/components......."

Giant ChinchillaOP

2024-11-22T22:34:39.148Z

Belgian Hare

2024-11-22T22:35:22.579Z

ok that means that nothing outside of "app" can be breaking it, because it wont be included in the bundle when built

but everything inside app seems fine to me

your build command is not using --turbo correct?

Giant ChinchillaOP

2024-11-22T22:35:48.321Z

"build": "next build",

Belgian Hare

2024-11-22T22:35:54.576Z

ok last few things to check

show me your next.config.js

Giant ChinchillaOP

2024-11-22T22:36:20.239Z

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "utfs.io",
      },
    ],
  },
  transpilePackages: [
    "@garange/ai",
    "@garange/api",
    "@garange/db",
    "@garange/geo",
    "@garange/locale",
    "@garange/reseller",
    "@garange/stripe",
    "@garange/supabase",
    "@garange/types",
    "@garange/ui",
    "@garange/upload",
    "@garange/utils",
    "geist",
  ],
};

export default nextConfig;

Belgian Hare

2024-11-22T22:36:30.285Z

Blow away all of that

const nextConfig = {};

and try build again

then once we rule out that can move on to next thing

Giant ChinchillaOP

2024-11-22T22:37:14.496Z

same error

Belgian Hare

2024-11-22T22:37:19.162Z

Ok cool leave that empty

So what we've ruled out:

- Issue can't be anywhere but /app.
- Issue can't be in /app because looks like standard hello world next app.
- Issue can't be in next.config.js because it's empty

This mean i'm most likely guessing it might just be a freak bug related to:

- potentially corrupt .next cache in build folder

- potentitally some broken node_modules somehow specifically on next/swc/packages

can you delete your .next folder and try again

Giant ChinchillaOP

2024-11-22T22:38:53.564Z

same thing

Belgian Hare

2024-11-22T22:39:02.582Z

can you delete your node_modules re-install and try again

and then can you share your node version

Giant ChinchillaOP

2024-11-22T22:40:13.617Z

v21.5.0

deleted node modules and reinstalled, still errors

Belgian Hare

2024-11-22T22:40:47.368Z

Ok will set my node version to yours and replicate your setup (just app folder with those files) and try build

Give me a moment

Giant ChinchillaOP

2024-11-22T22:41:27.773Z

"dependencies": {
    "@garange/api": "workspace:*",
    "@garange/db": "workspace:*",
    "@garange/geo": "workspace:*",
    "@garange/locale": "workspace:*",
    "@garange/reseller": "workspace:*",
    "@garange/stripe": "workspace:*",
    "@garange/supabase": "workspace:*",
    "@garange/tailwind": "workspace:*",
    "@garange/ui": "workspace:*",
    "@garange/upload": "workspace:*",
    "@garange/utils": "workspace:*",
    "@hookform/resolvers": "^3.9.0",
    "@plaiceholder/next": "^3.0.0",
    "@t3-oss/env-nextjs": "^0.11.1",
    "@tailwindcss/typography": "^0.5.15",
    "@tanstack/react-query": "^5.59.15",
    "@trpc/client": "next",
    "@trpc/react-query": "next",
    "@trpc/server": "next",
    "@turf/turf": "^7.1.0",
    "@uploadthing/react": "^7.1.1",
    "cmdk": "^1.0.0",
    "date-fns": "^4.1.0",
    "framer-motion": "^11.11.17",
    "fs": "^0.0.1-security",
    "geist": "^1.3.1",
    "lucide-react": "^0.460.0",
    "maplibre-gl": "^4.7.1",
    "next": "15.0.3",
    "next-international": "^1.2.4",
    "next-safe-action": "^7.9.4",
    "next-share": "^0.27.0",
    "next-themes": "^0.4.3",
    "nuqs": "^2.2.2",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "react-hook-form": "^7.53.0",
    "react-map-gl": "^7.1.7",
    "superjson": "^2.2.1",
    "tailwindcss": "^3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "uploadthing": "^7.3.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5.6.2"
  },
  "pnpm": {
    "overrides": {
      "@types/react": "npm:types-react@19.0.0-rc.1",
      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
    }
  }

im using pnpm v9.14.2 with in a turbo repo too if that helps

Belgian Hare

2024-11-22T22:43:41.553Z

next build wont take any of that into account

so shouldn't be effecting anything

next build simply starts at /app directory, (or pages or both) looks at what they import, and what those files import, ....etc the whole dependency tree and creates .js/html/css files from that

that process doesn't change based on if you're using pnpm or turbo repo

Ok so mine builds on my node version setting it to yours and trying again

No error

I wouldn't think it would be pnpm or turbo repo but that's two clear differences let's rule those out

To rule out pnpm can you set your package.json to this (keep in mind that at any point we can git stashand revert back to what you had aslong as you comitted your last progress)

{
"name": "yourprojectname",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"next": "15.0.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"prettier": "^3.3.3",
"sass": "^1.80.6",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

some of those arn't required but should be harmless

Are you running next build through turbo repo or just from terminal in that directory?

Giant ChinchillaOP

2024-11-22T22:49:58.099Z

through turbo repo

so i changed the package.json to that and deleted everything from the src directory cause it was erroring with package stuff, still the same build error

Export encountered an error on /_error: /500, exiting the build.

Belgian Hare

2024-11-22T22:53:15.726Z

can you cd into the sub project and run npm run build

when I said it can't be turbo I may have been mistaken didn't raelize you were running this from a monorepo root where the command may be including files outside a default next build

but we're getting close now i feel, there's only so much more we can remove before it's basically a new project, so if we haven't found it yet should be in one of last remaining areas to check

Giant ChinchillaOP

2024-11-22T22:54:42.689Z

even cd'ing into the sub dir produces same error

its practically a bare nextjs app

Belgian Hare

2024-11-22T22:54:51.790Z

can you share this stack trace that comes along with the error now?
Export encountered an error on /_error: /500, exiting the build.

Just want to see if amongst all the react/next files in that trace, there's any files in your project

Giant ChinchillaOP

2024-11-22T22:55:14.321Z

TypeError: Cannot read properties of null (reading 'useRef')
    at exports.useRef (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\node_modules\react\cjs\react.production.js:519:33)
    at eq (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:17570)
    at renderWithHooks (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4189:18)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4327:14)
    at retryNode (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
    at retryNode (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useRef')
    at exports.useRef (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\node_modules\react\cjs\react.production.js:519:33)
    at eq (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:17570)
    at renderWithHooks (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4189:18)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4327:14)
    at retryNode (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
    at retryNode (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4689:7)
    at renderElement (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\react-dom\cjs\react-dom-server.edge.production.js:4623:11)
Export encountered an error on /_error: /404, exiting the build.

i deleted pnpm-lock.yaml, .next, node_modules and did a clean install and thats the current error

Belgian Hare

2024-11-22T22:57:02.477Z

at exports.useRef (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\node_modules\react\cjs\react.production.js:519:33)
at eq (C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:17570

These two lines how i read them
"TypeError: Cannot read properties of null (reading 'useRef')"
"at exports.useRef "

This error can only happen if exports is null just going to think for a moment

Ahh yes i see issue

Giant ChinchillaOP

2024-11-22T22:58:07.733Z

i looked at the commits around where it stopped building and nothing regarding the web app in the monorepo changed

Belgian Hare

2024-11-22T22:58:13.508Z

C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\node_modules\react\cjs\react.production.js

This path here is the path to your monorepo root node_modules NOT the project root node_modules correct?

Giant ChinchillaOP

2024-11-22T22:58:39.019Z

yeah looks like it

Belgian Hare

2024-11-22T22:58:58.161Z

ok i'm almots 100% sure this monorepo related now

can you cd into the project sub directory

set package.json to that (what i pasted)

run npm install in that sub directory

Giant ChinchillaOP

2024-11-22T22:59:18.652Z

can i see the tsconfig too

Belgian Hare

2024-11-22T22:59:19.182Z

and then run npm run build

Giant ChinchillaOP

2024-11-22T22:59:34.245Z

my tsconfig is in a package i dont thikn that will work

Belgian Hare

2024-11-22T22:59:37.183Z

this should result in: "react being installed into the project SUB directory and then the build using that"

just thinking.

is there anyway you can force react to be installed into that project sub directories node_modules using turbo repo? not fimiliar with it

Giant ChinchillaOP

2024-11-22T23:02:12.950Z

it looks like it is already

Belgian Hare

2024-11-22T23:02:51.517Z

that would be strange if it's there already because when something within that folder does something like this.

require("react") or import react

it will go to the closest node_modules and take that

if it's not there, it will then go up to your project root and check there

and then finally check you're globally installed packages in a root directory somewhere on your computer

so if the stack trace for that error we're debugging is your monorepo root then that default behaviour is being changed someho

i.e stack trace error was: C:\Users\lightest\Desktop\garange-refactor\garange-mono\node_modules\next\node_modules\react\cjs\react.production.js

Giant ChinchillaOP

2024-11-22T23:04:00.677Z

react 18.2.0 which is used by the mobile app in the repo is installed in the root node_modules

Belgian Hare

2024-11-22T23:04:08.088Z

ahh yes this is the issue

react 18.2.0 doesn't support the server component functionality nextjs uses

"react": "19.0.0-rc-66855b96-20241106" this version is the version you'd need in the monorepo root node_modules

or a way to install this version into web specifically (so it uses that version instead of one at root)

hope that makes sense

Giant ChinchillaOP

2024-11-22T23:05:36.925Z

it does, but turbo also installed the right react version in the web's node_modules. is it just not using that?

Belgian Hare

2024-11-22T23:06:07.565Z

Yeah the issue is it's not using that

I honestly don't know how aswell because if you cd into the project directory itself which you've done

and you run npm run build we're now completely outside "turbo repo land"

and i'm confident this would result in resolving react to the closest node_modules which would be in that project

regardless of what's in directories above

Giant ChinchillaOP

2024-11-22T23:07:19.821Z

running pnpm install inside the sub dir says scope: 17 packages

im not sure it runs independently

Belgian Hare

2024-11-22T23:07:38.410Z

mmmmm

let me go read the turbo repo docs

Giant ChinchillaOP

2024-11-22T23:08:40.513Z

i just moved the package to a completely fresh directory and it builds

its definitely a turbo issue

i believe i updated turbo recently as well

Belgian Hare

2024-11-22T23:09:58.813Z

if you roll it back and that fixes it great, but otherwise I'd say you'd need to investigate how you can setup a monorepo that allows for multiple independent versions of react in each sub project

Answer

Belgian Hare

2024-11-22T23:10:12.677Z

this is outside my expertise as i don't use turborepo or pnpm

Giant ChinchillaOP

2024-11-22T23:11:07.528Z

well regardless i greatly appreciate your help, i believe i can figure it out from here

Belgian Hare

2024-11-22T23:11:28.243Z

No worries man, just make it as answered then

Giant ChinchillaOP

2024-11-22T23:26:41.145Z

fixed by adding

"pnpm": {
    "overrides": {
      "react": "npm:react@19.0.0-rc-66855b96-20241106",
      "react-dom": "npm:react-dom@19.0.0-rc-66855b96-20241106"
    }
  }

to the root
however thats not really a good fix i assume, so maybe something like shared-workspace-lockfile=false in the .npmrc is better. but i got it to build, and that's all that matters for now