next.js: [NEXT-1152] TypeError: Cannot read properties of null (reading 'useContext') [Next js 13.4.1 throwing this error while using framer motion]

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 20.6.0: Wed Jan 12 22:22:42 PST 2022; root:xnu-7195.141.19~2/RELEASE_X86_64
    Binaries:
      Node: 20.1.0
      npm: 9.6.6
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

none

To Reproduce

Use “Framer motion” in next JS 13.14.1 version

Describe the Bug

TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:118)
    at MotionComponent (file:///vercel/path0/node_modules/framer-motion/dist/es/motion/index.mjs:34:16)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:118:245)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)
    at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:215)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:118)
    at MotionComponent (file:///vercel/path0/node_modules/framer-motion/dist/es/motion/index.mjs:34:16)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:118:245)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)
    at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:215)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
info  - Generating static pages (3/3)
> Export encountered errors on following paths:
	/
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

Getting this error log every time after trying to deploy the code in vercel. Downgrading Next JS version to 13.3.1 solved the issue.

Expected Behavior

Should have worked regardless of the version of Next JS.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1152

About this issue

Original URL
State: closed
Created a year ago
Reactions: 21
Comments: 44 (13 by maintainers)

Commits related to this issue

Fix custom server React resolution with app dir and pages both presented (#49805) If running Next.js in the custom server with both app and pages directories presented, a standalone server needs to s... — committed to vercel/next.js by shuding a year ago

Most upvoted comments

Same issue here for any React hooks fired inside an ESM transpiled module. 13.4.1 will throw “Cannot read properties of null” for useMemo, useCallback, etc. Pages (which works perfectly fine with 13.3) not App dir.

+15

oalexdoda on May 11, 2023

I can repro this in the pages directory with a custom server (in my case, using next-remote-watch). It seems that any npm packages that depend on react don’t get the prebundled copy Next uses.

Minimal repro: https://github.com/sophiebits/next-issue-49355/commit/main. Run node server.js and then visit localhost:3000.

TypeError: Cannot read properties of null (reading 'useState')
    at useState (/private/tmp/next-issue-49355/node_modules/react/cjs/react.development.js:1622:21)
    at useCustomHook (file:///private/tmp/next-issue-49355/node_modules/imagine-i-were-a-real-npm-package/index.js:4:10)
    at Home (webpack-internal:///./pages/index.tsx:11:95)
    at renderWithHooks (/private/tmp/next-issue-49355/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8674:16)

When options.customServer is false, then Next seems to use React entirely from npm. When it is missing (or presumably true), as in the repro, Next uses React prebundled but any node_modules requiring React currently resolve to the npm version.

cc @shuding

+13

sophiebits on May 7, 2023

@sophiebits I just tore my app apart piece by piece and was surprised to discover that our use of a custom server was the culprit!

I can confirm your report and is the cause of my other issue https://github.com/vercel/next.js/issues/49376

13.3.4 is ✅ 13.4.0 is ❌

jamesopti on May 7, 2023

Same issue here, but not using framer-motion.

I only get this error on 13.4.0 while building on Vercel, but not developing locally.

13.3.4 is fine.

ygorduraes on May 8, 2023

Also encountered this issue after updating from 13.1.6 to 13.4.1 while running npm run dev. Besides the update everything is the same as it was

IamJoseph on May 7, 2023

@sophiebits I think there’re 2 issues, I’m trying to address the custom server one with #49805. But also see reports about normal next start cases.

shuding on May 16, 2023

@CobyPear can you file another issue as it’s not related to the original issue here, thanks.

@veiico do you have a minimal repro? you shouldn’t need to set __NEXT_PRIVATE_PREBUNDLED_REACT=next as it’s a private env managed by nextjs

huozhi on May 24, 2023

Hi @huozhi I can no longer reproduce this on the latest canary but instead I’m seeing some other behavior that is explained and reproduced on a branch here: https://github.com/CobyPear/repro-no-router/tree/use-latest-canaries The same code is working as expected on 13.4.3.

CobyPear on May 23, 2023

https://github.com/vercel/next.js/issues/50158 is this issue related? Literally getting the same issue with the pages directory. Any update on this?

rootusrsystem32 on May 22, 2023

Same issue for me with next-mdx-remote. Works fine with 13.3.4 but not anymore with 13.4.x

dsebastien on May 16, 2023

FWIW we only use a custom server to support local development over HTTPS.

Surprisingly, this seems to be a long running and quite controversial issue: https://github.com/vercel/next.js/discussions/10935

jamesopti on May 8, 2023