Closed mushaidul-islam closed 1 year ago
Alshie
commented
1 year ago 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
commented
1 year ago This is also happening without Next. I am using plain React 18.2 built with Parcel.
mushaidul-islam
commented
1 year ago @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
commented
1 year ago @AnotherDolphin were you able to find any solution for it? I solved my issue by downgrading next version though.
jamesopti
commented
1 year ago I filed a possibly related or same root cause issue: https://github.com/vercel/next.js/issues/49376
sawyerh
commented
1 year ago 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.217 tests fail, most due to:
TypeError: Cannot read properties of null (reading 'useContext')
IamJoseph
commented
1 year ago 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
commented
1 year ago 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
jamesopti
commented
1 year ago @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 ❌
aaschlote
commented
1 year ago Any solution for this issue? I'm facing it too.
ygorduraes
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago 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
aaschlote
commented
1 year ago Now I'm getting this issue:
Any solution for it?
jpbnetley
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago My repro above (https://github.com/vercel/next.js/issues/49355#issuecomment-1537536063) 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
commented
1 year ago Same issue for me with next-mdx-remote. Works fine with 13.3.4 but not anymore with 13.4.x
shuding
commented
1 year ago @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.
david-morris
commented
1 year ago Heads up to googlers: I had a similar issue, where I was getting errors like this:
unhandledRejection TypeError: Cannot read properties of null (reading '0')
at Object.<anonymous> (/workspaces/react/node_modules/react-dom/cjs/react-dom-test-utils.production.min.js:23:334)
at Module._compile (node:internal/modules/cjs/loader:1196:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
at Module.load (node:internal/modules/cjs/loader:1074:32)
at Function.Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1098:19)
at require (node:internal/modules/cjs/helpers:108:18)
at Object.<anonymous> (/workspaces/react/node_modules/react-dom/test-utils.js:4:20)
at Module._compile (node:internal/modules/cjs/loader:1196:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10) {
type: 'TypeError'
}I was getting similar tracebacks trying to serve on local dev. I'm using NX, so I think NX might be feeding a custom server with its build and server executors.
Using canary, it builds. So I think that #49805 fixed my weird react-dom errors too.
Edited to add: weirdly, I have no problem with 13.4.3-canary.3 or 13.4.4-canary.0 but 13.4.3 itself will still give me this error. Hopefully we won't be stuck dancing between canary versions of next.js, that would be bad.
wescopeland
commented
1 year ago I am using Nx with Next.js 13.4.3 and still facing this issue.
TypeError Cannot read properties of null (reading 'useRef')
error stack:
• react.development.js useRef
/node_modules/react/cjs/react.development.js:1630edit: Looking through Nx PRs and commits, it's likely an Nx issue and not a Next.js issue.
khuezy
commented
1 year ago I updated to 13.4.3 and got ERROR TypeError: Cannot read properties of null (reading 'useMemo') when navigating from an appDir page to a pages page
jamesopti
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago @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
commented
1 year ago 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?
jakeleventhal
commented
1 year ago @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
commented
1 year ago Can someone create a minimal reproduction that still failing with the latest canary as previous issues seem to be resolved? 🙏
CobyPear
commented
1 year ago 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.
https://github.com/vercel/next.js/assets/63015754/c11795ca-b29b-46b7-94f7-ff59e7769e25
CobyPear
commented
1 year ago 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
commented
1 year ago I still have this error on 13.4.3
veiico
commented
1 year ago 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)
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
commented
1 year ago 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
commented
1 year ago @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[bot]
commented
1 year ago We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.
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.
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.
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.
Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the :+1: 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.
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.
veiico
commented
1 year ago @veiico do you have a minimal repro? you shouldn't need to set
__NEXT_PRIVATE_PREBUNDLED_REACT=nextas 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 https://github.com/vercel/next.js/issues/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
commented
1 year ago 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
commented
1 year ago Wanted to cross-link this issue with https://github.com/vercel/next.js/issues/48518#issuecomment-1562077149 which felt very similar.
huozhi
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago @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
commented
1 year ago 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
commented
1 year ago @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
Verify canary release
Provide environment information
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
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