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

[mushaidul-islam]

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

[Alshie]

I have this same issue but it seems to originate from nanostores for me.

It only happens for me when building for Vercel - standard build is fine.

It only occurs for me on pages in the pages directory and only when I also have pages in the app directory - occurring in my branch where I’m doing migration to /app

not sure if these differences should require opening a separate issue?

[AnotherDolphin]

This is also happening without Next. I am using plain React 18.2 built with Parcel.

[mushaidul-islam]

@Alshie yuh the standard build was working fine for me too. But after vercel build failed my standard build also started failing with the same error logs.

[mushaidul-islam]

@AnotherDolphin were you able to find any solution for it? I solved my issue by downgrading next version though.

[jamesopti]

I filed a possibly related or same root cause issue: #49376

[sawyerh]

I just ran across this issue while running pnpm test-unit on the latest canary branch.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.24.3
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.8.2

17 tests fail, most due to:

TypeError: Cannot read properties of null (reading 'useContext')

[IamJoseph]

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

[sophiebits]

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: sophiebits/next-issue-49355@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

[jamesopti]

@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 #49376

13.3.4 is ✅
13.4.0 is ❌

[aaschlote]

Any solution for this issue? I'm facing it too.

[ygorduraes]

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.

[jpbnetley]

Just FYI, if you still get the hook null error after downgrading to version 13.3.4 - just check the package json version ranges...
it was giving me a bad time. :)

[jamesopti]

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: #10935

[aaschlote]

Now I'm getting this issue:

• error TypeError: Cannot read properties of null (reading 'useState')
  at Module.useState (.../node_modules/react/cjs/react.development.js:1622:21)
  at useInView (../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs:390:31)

Any solution for it?

[jpbnetley]

Now I'm getting this issue:

• error TypeError: Cannot read properties of null (reading 'useState')
  at Module.useState (.../node_modules/react/cjs/react.development.js:1622:21)
  at useInView (../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs:390:31)

Any solution for it?

try locking your package version for nextjs as a temp fix.
"nextjs":"~13.3.4"

[oalexdoda]

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.

[shuding]

I'm wondering if this is fixed in 13.4.1-canary.2+ (by #49274). Can anyone create a reproduction? I tried Framer Motion with a simple <motion.div/> case which works.

[sophiebits]

My repro above (#49355 (comment)) still seems to give the error for me on 13.4.3-canary.0 (you may need to git checkout node_modules after running npm install to bring back my fake npm module).

Since it doesn't use next build it makes sense that #49274 had no effect.

[dsebastien]

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

[shuding]

@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.

[jamesopti]

I can confirm that 13.4.3 works as expected with a custom server for an app not yet using the app dir (just pages)

[shuding]

For custom server, the fix (#49805) was landed in 13.4.3.
For the non custom server case, I still need to investigate it but don't have a simple reproduction yet.

[khuezy]

@shuding Here is a minimal repo that reproduces the crash: https://github.com/conico974/next-app-dir
It's a standalone, customServer: false app deployed on AWS. If you'd like to deploy, just run npx sst deploy --stage dev
If you go to the /isr page and navigate to /ssrPage, it'll crash

[jlorezz]

#50158 is this issue related? Literally getting the same issue with the pages directory. Any update on this?

[jakeleventhal]

@shuding
Am getting this in a pages dir app.

Something of note: i am running in monorepo where my app is at the path apps/ecominate/client. run vercel link from the root of the repository and set my root directory to apps/ecominate/client, i get this error. If i cd into the apps/ecominate/client directory, set the root directory to null, then run vercel link and build, i do NOT get this error.

[huozhi]

Can someone create a minimal reproduction that still failing with the latest canary as previous issues seem to be resolved? 🙏

[CobyPear]

I have a screen recording for now, I can try to get a repo up later. This is using next 13.4.4-canary.3 using standalone output running locally with build && start. The error is also present in dev mode.

nextjs-13-4-4-canary-3-missing-hooks.mov

[CobyPear]

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.

[jakeleventhal]

I still have this error on 13.4.3

[veiico]

Same issue on 13.4.2, 13.4.3 and the latest canary 13.4.4-canary.7 (cleaned-up installs with .next and node_modules removed before-hand, versions locked and confirmed by hand)

Update:

Resolved, for me it was an env line __NEXT_PRIVATE_PREBUNDLED_REACT=next (don't remember for which problem this was used, but removing it fixed it}

[Benimation]

I'm getting the same error for our component library, but only when using npm link <package-path> during local development.

We use the transpilePackages config option.

It works fine when the package is actually published, so a workaround for now it to temporarily downgrade Next when using npm link. This will be a problem once we start migrating to the new app directory, though..

[huozhi]

@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

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template for pages, template for App Router), but you can also use these templates: CodeSandbox: pages or CodeSandbox: App Router.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without reproduction steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[veiico]

@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 TLDR; Had a lot of other issues as well with other things (deployments, edge runtime, a lot of deleting, modifying, testing etc), so I don't really recall why I've added it in the first place (might have followed this #48964).

Now it works and with a quick new create-next-app repo I can't reproduce it (before I've dissected my cloned app to bare bones and I could). If I encounter this again - I'll create a repo for reproduction.

But thank you for reaching out a hand! ❤️

[starlight-akouri]

I was having an issue with this where I'd get an error about useMemo only when building on vercel. I was on 13.4.1.

I updated to 13.4.3 and it now builds on both my local machine and vercel fine.

[jeffrafter]

Wanted to cross-link this issue with #48518 (comment) which felt very similar.

[huozhi]

Few related fixes are released in 13.4.4, please try to upgrade to latest and test to see if the issue still existed. Will close this issue as there's no new reproduction testing against latest canary. If you still bumped to troubles, please file a new issue with minimal reproduction with latest canary.

[jakeleventhal]

Confirming still seeing issues on 13.4.4 and vercel 30.0.0

TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (/Users/jakeleventhal/Code/rip-technologies/node_modules/.pnpm/react@18.2.0/node_modules/react/cjs/react.production.min.js:25:208)
    at Object.useWrappedStore (/Users/jakeleventhal/Code/rip-technologies/node_modules/.pnpm/next-redux-wrapper@8.1.0_next@13.4.4_react-redux@8.0.5_react@18.2.0/node_modules/next-redux-wrapper/lib/index.js:297:41)

This for every page in my app when it gets to the compiling page data step:

- info Creating an optimized production build  
- info Compiled successfully
- info Collecting page data 
<error is here>

Works perfectly fine with next build, not with vercel build

[huozhi]

@jakeleventhal can you open an new issue with reproduction? It's helpful for tracing and narrowing down the issue, it's hard to tell from the error trace without knowing what configs you have set up

[Yeraldin28]

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')

    {

"name": "next-paint",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "^13.0.5",
"@tailwindcss/forms": "^0.5.2",
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-color": "^3.0.6",
"@types/react-dom": "18.0.9",
"@zeit/next-css": "^1.0.1",
"amqplib": "^0.10.3",
"bufferutil": "^4.0.7",
"eslint": "8.28.0",
"eslint-config-next": "13.0.5",
"nanoid": "^4.0.0",
"next": "~13.3.4",
"next-compose-plugins": "^2.2.1",
"react": "^18.2.0",
"react-color": "^2.19.3",
"react-dom": "^18.2.0",
"socket.io-client": "^4.5.4",
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2",
"typescript": "4.9.3",
"utf-8-validate": "^5.0.10"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
"@types/react-color": "^3.0.6",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2"
}
}

[khuezy]

@huozhi Does the .next/server/app-paths-manifest.json file suppose to contain the "root" route? If it also doesn't show up in pages-manifest.json, how would you determine if the path was appDir or pages?
oh nvm, it shows up at /page