#4415·blitz

Build on fresh app install fails: "Error occurred prerendering page "/". TypeError: Cannot read properties of null (reading 'useState')"

Author: marko911Created Jan 31, 2025Updated Feb 18, 2025
Labelskind/bugstatus/triage

What is the problem?

I've pasted the commands I ran but the out-of-the-box when I run yarn build it fails. No changes have been made to anything from my side.

Paste all your error logs here:

bash
 ~/Downloads  blitz new medici                                                                                                                          
✔ Pick your new app template › App Router – Full Setup: includes DB and auth (Recommended)
✔ Install dependencies? › yarn
✔ Pick a form library (you can switch to something else later if you want) › React Hook Form
Hang tight while we set up your new Blitz app!
CREATE    .env
CREATE    .env.local
CREATE    .env.test
CREATE    .eslintrc.json
CREATE    README.md
CREATE    db/dev.db
CREATE    db/index.ts
CREATE    db/schema.prisma
CREATE    mailers/forgotPasswordMailer.ts
CREATE    next-env.d.ts
CREATE    next.config.js
CREATE    package.json
CREATE    public/favicon.ico
CREATE    src/app/(auth)/components/ForgotPasswordForm.tsx
CREATE    src/app/(auth)/components/LoginForm.tsx
CREATE    src/app/(auth)/components/LogoutButton.tsx
CREATE    src/app/(auth)/components/ResetPasswordForm.tsx
CREATE    src/app/(auth)/components/SignupForm.tsx
CREATE    src/app/(auth)/forgot-password/page.tsx
CREATE    src/app/(auth)/layout.tsx
CREATE    src/app/(auth)/login/page.tsx
CREATE    src/app/(auth)/mutations/changePassword.ts
CREATE    src/app/(auth)/mutations/forgotPassword.test.ts
CREATE    src/app/(auth)/mutations/forgotPassword.ts
CREATE    src/app/(auth)/mutations/login.ts
CREATE    src/app/(auth)/mutations/logout.ts
CREATE    src/app/(auth)/mutations/resetPassword.test.ts
CREATE    src/app/(auth)/mutations/resetPassword.ts
CREATE    src/app/(auth)/mutations/signup.ts
CREATE    src/app/(auth)/reset-password/page.tsx
CREATE    src/app/(auth)/signup/page.tsx
CREATE    src/app/(auth)/validations.ts
CREATE    src/app/api/rpc/[[...blitz]]/route.ts
CREATE    src/app/blitz-auth-config.ts
CREATE    src/app/blitz-client.ts
CREATE    src/app/blitz-server.ts
CREATE    src/app/components/Form.tsx
CREATE    src/app/components/LabeledTextField.tsx
CREATE    src/app/error.tsx
CREATE    src/app/layout.tsx
CREATE    src/app/loading.tsx
CREATE    src/app/page.tsx
CREATE    src/app/styles/Home.module.css
CREATE    src/app/styles/globals.css
CREATE    src/app/users/hooks/useCurrentUser.ts
CREATE    src/app/users/queries/getCurrentUser.ts
CREATE    tsconfig.json
CREATE    types.ts

✔ Retrieving the freshest of dependencies
✔ Resolving packages
✔ Fetching packages
✔ Linking dependencies
✔ Building fresh packages
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
✔ Committing your app

 Your new Blitz app is ready! Next steps:
   1. cd medici
   2. yarn dev

 ~/Downloads  cd medici/                                                                                                                                     54.7s  Fri Jan 31 08:37:06 2025
 ~/D/medici    yarn build                                                                                                                                          Fri Jan 31 08:49:46 2025
yarn run v1.22.22
warning ../../package.json: No license field
$ blitz build
Loaded env from /Users/marko/Downloads/medici/.env.local
Loaded env from /Users/marko/Downloads/medici/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
 ⚠ You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages
  ▲ Next.js 15.0.1
  - Environments: .env.local, .env
  - Experiments (use with caution):
    · typedRoutes

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ...Pages directory cannot be found at /Users/marko/Downloads/medici/pages or /Users/marko/Downloads/medici/src/pages. If using a custom path, please configure with the `no-html-link-for-pages` rule in your eslint config file.
   Linting and checking validity of types  .(node:47979) [ESLINT_PERSONAL_CONFIG_SUPPRESS] DeprecationWarning: '~/.eslintrc.*' config files have been deprecated. Please remove it or add 'root:true' to the config files in your projects in order to avoid loading '~/.eslintrc.*' accidentally. (found in "../../.eslintrc.json")
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Linting and checking validity of types
 ✓ Collecting page data
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useState')
    at t.useState (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:68:6888)
    at H (/Users/marko/Downloads/medici/.next/server/chunks/672.js:33:18172)
    at react-stack-bottom-frame (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:229011)
    at renderWithHooks (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:66720)
    at renderElement (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:81448)
    at renderElement (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:134906)
    at retryNode (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:139895)
    at renderNodeDestructive (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:136300)
    at renderNode (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:149016)
    at renderElement (/Users/marko/Downloads/medici/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:127205)
Export encountered an error on /page: /, exiting the build.

Paste all relevant code snippets here:

PASTE_HERE (leave the ``` marks)

What are detailed steps to reproduce this?

  1. blitz new some-app-name -- choose app router
  2. cd some-app-name
  3. yarn build

Run blitz -v and paste the output here:

 blitz -v                                                                                                                                15.7s  Fri Jan 31 08:53:45 2025
Blitz version: 2.2.1 (global)
Blitz version: 2.2.1 (local)
macOS Sonoma | darwin-arm64 | Node: v20.12.1


 Package manager: npm

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 764.27 MB / 32.00 GB
    Shell: 3.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.1/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.1/bin/npm
  npmPackages:
    @blitzjs/auth: 2.2.1 => 2.2.1
    @blitzjs/next: 2.2.1 => 2.2.1
    @blitzjs/rpc: 2.2.1 => 2.2.1
    @prisma/client: 5.4.2 => 5.4.2
    blitz: 2.2.1 => 2.2.1
    next: 15.0.1 => 15.0.1
    prisma: 5.4.2 => 5.4.2
    react: 19.0.0 => 19.0.0
    react-dom: 19.0.0 => 19.0.0
    typescript: ^4.8.4 => 4.9.5

Please include below any other applicable logs and screenshots that show your problem:

No response