Unsupported Server Component type: undefined(0 , react__WEBPACK_IMPORTED_MODULE_6__.useContext) is not a functionCannot read properties of undefined (reading 'Context')
This error is common when you're trying to use React Context on the server (or without a provider). Context only works on the client, so you need to use 'use client' to access it.
- You may be using `useContext` or rendering a `Provider` in a component somewhere without `use client`.
- You might be using a library component that uses a context behind the scenes in a server component.
- You may have forgotten to wrap a component in a Provider.
- If you're using a context yourself, make sure both the Provider and all components using the context are marked 'use client'.
- Or, if you're using third-party components that don't support SSR, make sure you use them only in 'use client' components.
- Or, if you are using your own package with components, add 'use client' to the components that use the context and make sure this line is not removed by your bundler.
- In some cases, you may need to use next/dynamic for external components or re-export them from a file marked 'use client'.
Event handlers cannot be passed to Client Component props
Only client components can pass event handlers like `onClick`, `onChange`, `onKeyDown`, etc. – not server components.
This is because event handlers cannot be serialised through a request, so Next.js can't pass them to the client where they're needed.
- Add 'use client' on the component that passes the event handler, to make your component a client component.
ENOENT no such file or directory (when deployed to Vercel)
Next.js doesn't include all your files in the build, so you might get an error in the deployed build when trying to read a file that you don't get during local development.
Your code is statically analysed to find which files to include in the build, but this doesn't work very well in practice.
Likely causes:
- You are reading files dynamically using a template literal or string concatenation, for example fs.readFile(`./prompts/${promptName}.txt`, 'utf8').
- You are using Yarn 2, which is not yet supported by Vercel.
- The folder path is not resolved correctly on Vercel.
- Use static file names instead of dynamically concatenated parameters for fs.readFile
- Use process.cwd() instead of __dirname to resolve the directory, e.g. path.join(process.cwd(), 'posts');
- Add the file to the build manually by setting `output: 'standalone'` in next.config.js. You may also need to specifically include the files in `outputFileTracingIncludes` if Next.js continues to fail to recognise them.
- If you're using Yarn 2, downgrade to Yarn Classic
Hydration failed because the initial UI does not match what was rendered on the server.
Next.js renders your page both on the server and on the client. When the site looks different between the two, Next.js throws a hissy fit.
Likely causes for these unexpected differences:
- Invalid HTML (nested <p> tags, nested <button> tags, <ul> inside of <p>, etc.)
- Using Date() in components
- Browser extensions modifying the page
- Conditionally rendering parts of your JSX only on the client (e.g. by checking for `window`)
- Check for and fix any invalid HTML nesting
- Disable your browser extensions
- Remove conditional rendering
- Move Date() fully to the server using Server Components or getServerSideProps, or to the client using a state and 'use client'
Router is not defined`NextRouter` was not mountedTypeError: Cannot read property 'push' of undefined
You are using the Next.js App Router in your project (/app instead of /pages), but you're trying to import something from 'next/router' (which is for the Pages Router) in your component.
It's likely that you selected the wrong import autocomplete in your IDE, since the 'next/router' import is often shown at the top.
- Use 'next/navigation' import instead of 'next/router'
- Or, check if you are using any dependency that only works with Pages Router and find an alternative.
- Or, use Pages Router in your app.