Next.js Discord

Discord Forum

Next.js 14 build error with pnpm: TypeError: Cannot read properties of null (reading 'useRef')

Unanswered
Atlantic herring posted this in #help-forum
Open in Discord
Atlantic herringOP
I’m using npm workspaces in my project and recently switched to pnpm. The project structure is as follows:
apps
|_ backend (nodejs)
|_ mobile (expo)
|_ website (nextjs)
packages
|_ shared (interfaces)

After migrating the project workflow to pnpm, for some reason, during the build of my Next.js application, I encounter the following errors that prevent the app from building:

Generating static pages (0/12) [= ]TypeError: Cannot read properties of null (reading 'useRef')
Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useRef')
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useRef')
> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
ELIFECYCLE Command failed with exit code 1.


Additional informations:
- None of the website components use the useRef hook.
- I’ve cleared the pnpm cache, lock file, and node_modules.
- I added directives to pnpm-workspaces publicHoistPattern for react and react-dom.
- I added node-linker=hoisted to the .npmrc config.

None of these steps helped. This error did not occur when the project was based on npm.

Website package.json dependencies:
"dependencies": {
  "@dto/shared": "workspace:*",
  "@radix-ui/react-dialog": "^1.1.15",
  "next": "14.2.5",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  // other deps
},

I’d be grateful for guidance on the appropriate solution.

0 Replies