Replies: 6 comments
-
|
Hi @jcald1, This error usually happens because something in your build is trying to access A few things to check and try:
TLDR: Hope this helps! Feel free to share any updates or errors after trying this. |
Beta Was this translation helpful? Give feedback.
-
|
It looks like those two versions are stable: https://react.dev/blog/2024/12/05/react-19 I don't have custom error or 404 pages. I cleared out the cache and rebuilt. I also had these errors before upgrading. I did the upgrade to see if the errors would go away. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @jcald1, Since you’ve confirmed you’re on React 19 and Next 15 (which are stable releases now), the issue is more likely coming from: Third-party packages that haven’t fully updated for React 19
Server vs Client component mismatch
Error page rendering during prerender
Steps you can try:
If this helps, marking it as an answer would be appreciated! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jcald1, I see you're encountering this challenging useContext error during build. @Anipaleja provided excellent initial advice, and I'd like to add a few additional debugging strategies that might help identify the root cause: Additional Debugging Approaches:1. Windows-Specific Build IssuesSince this only happens on Windows but not on Vercel, this could be a Windows-specific path or module resolution issue: # Try using cross-env to normalize environment variables
npm install --save-dev cross-env
# Update your package.json build script:
"build": "cross-env NODE_ENV=production next build"2. Isolate the Problematic ComponentThe error points to // pages/404.js (or app/not-found.js for App Router)
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}3. Check for Conditional Hook UsageLook for any conditional useContext calls in your codebase, especially in:
# Search for potential problematic patterns:
grep -r "useContext" src/
grep -r "React.useContext" src/4. Dependency Tree AnalysisSince you have many Radix UI components, one might be causing the issue. Try temporarily removing groups of dependencies to isolate which one: # Create a backup of package.json first
# Then systematically remove Radix UI packages in groups and test5. Build with Verbose LoggingEnable more detailed Next.js build logging: # In next.config.mjs, add:
const nextConfig = {
experimental: {
logging: {
level: 'verbose'
}
},
// ... your existing config
}6. Check for Server/Client Boundary IssuesEven without custom error pages, some component in your app might be improperly mixing server and client code. Look for:
7. Try Alternative Build ApproachTest if this is a build-time vs runtime issue: # Try building with static export to see if the issue persists
# Add to next.config.mjs:
output: 'export',
trailingSlash: true,8. Module Resolution DebuggingAdd this to your next.config.mjs to debug module resolution: webpack: (config, { dev, isServer }) => {
if (!dev && isServer) {
config.resolve.alias = {
...config.resolve.alias,
'react': path.resolve('./node_modules/react'),
'react-dom': path.resolve('./node_modules/react-dom'),
}
}
return config
}9. Package Lock InvestigationSince this works on Vercel but not locally, compare the exact dependency versions:
Try updating your project to match Vercel's exact environment or vice versa. Quick Test:If you want to quickly test if this is a Radix UI compatibility issue, temporarily replace a few Radix components with native HTML elements and see if the build succeeds. Let us know what the |
Beta Was this translation helpful? Give feedback.
-
|
Hi, sorry you are getting multiple llm streams for info you could've prompted yourself. Could we have a look at your project tree? Someone reported this issue too #82366 - I wonder if its similar, I couldn't reproduce it - but I don't have windows setup. Could you helps us out in #82366 there's a repository with simple instructions, if you follow those, does it also give you an issue? |
Beta Was this translation helpful? Give feedback.
-
|
A solution I've seen work is to ensure there's no dependency duplication. If possible run |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I have no error when I run "next dev" (on Windows), or when building on Vercel, but I get this error when I do a "next build" on my Windows system.
Additional information
I tried a
git clean -xfd, delete the package lock file, upgraded the global next on my system, did a force cache clean and verified that there are no warnings with peer dependencies. VSC is showing no problems with the code.package.json
let userConfig = undefined
try {
userConfig = await import('./v0-user-next.config')
} catch (e) {
// ignore error
}
/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
images: {
unoptimized: true,
}
}
mergeConfig(nextConfig, userConfig)
function mergeConfig(nextConfig, userConfig) {
if (!userConfig) {
return
}
for (const key in userConfig) {
if (
typeof nextConfig[key] === 'object' &&
!Array.isArray(nextConfig[key])
) {
nextConfig[key] = {
...nextConfig[key],
...userConfig[key],
}
} else {
nextConfig[key] = userConfig[key]
}
}
}
export default nextConfig
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"target": "ES6",
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./"]
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}
Beta Was this translation helpful? Give feedback.
All reactions