This is a series of my memo from when I migrated Next.js v13 into my project with the article From Pages to App. I also updated other packages’ versions. I decided to put the list of problems I encountered while the development process and also how I fixed them.
Vague error messages
Error: React Context is unavailable in Server Components
You have to put "use client" to use "SessionProvider" provided by nextAuth because it uses React Context behind the scene.
I read some articles setting up NextAuth with Next.js and found that the current common practice is creating a provider as a client-side component and wrapping with it at app/layout.js rather than using SessionProvider directly. This approach applies to other providers which also require use client.
TypeError: (0 , _react.createContext) is not a function
This is another pattern that you have to put "use client”. If you see this message, most likely you’re using redux hooks/utils in server components. One tricky thing is that Redux doesn’t specify what file causes this error.
TypeError: Cannot read properties of undefined (reading ‘prototype’)
This error came from semantic-ui-react and also told me to put "use client". So far, you have to put "use client" at all files which include semantic-ui-react components. Alternatively, you can create client components for each semantic-ui-react component. But I haven’t applied this approach yet.
"use client"
import { Grid as SemanticGrid } from "semantic-ui-react";
const Grid = (props) => {
return <SemanticGrid {...props}>{props.children}</SemanticGrid>
}TypeError: Cannot read properties of undefined (reading ‘select’)
This is more likely because your first argument of updateQueryData (endpoint name) is incorrect. In the case below, it should be getCartItems to match the actual query I defined.
Error: [Immer] The first or second argument to `produce` must be a function
I got this error because I forgot to put the second argument for updateQueryData (cache key arguments).
Different CSS files loading b/w production and dev
After deploying on vercel, I found there is a wired padding provided by semantic ui css file.
Here is how Next.js optimize css files during the build process. My global.css file cannot always override semantic ui stylings.
When building for production with
next build, CSS files will be bundled into fewer minified.cssfiles to reduce the number of network requests needed to retrieve styles.
The quick and dirty way is put !important for those stylings you want to override stylings. But I think a better way in my case is to add stylings with styled-components.
No redux-next-wapper for Next.js 13 so far
Because of it, I decided to use rest api more often than before to keep most of data on the server side rather than saving it in local storage.
I tried Optimistic updates for a better user experience.
That’s it! It was more difficult for me to catch/handle errors than usual because most of libraries still assume React ecosystem. Hope it helps someone as well. Please let me know if you have/find any better solution. Thank you for reading :)
