Updated my Next.js project to v13 Appendix: Troubleshooting

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.

Part1: Migrated app router from page router

Part2: Migrated router API

Part3: Applied some other Next.js v13 updates

Optional: Updated NextAuth from v3 to v4

Optional: Updated Redux from classical Redux to Redux Toolkit Query

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.
Setup and Use NextAuth.js in Next.js 13 App Directory 2023
Add NextAuth to NextJS 13 and Authenticate with GitHub

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.

Redux Essentials, Part 8: RTK Query Advanced Patterns | Redux

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 .css files to reduce the number of network requests needed to retrieve styles.
CSS Modules

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.
Usage with Next.js 13? · Issue #494 · kirill-konshin/next-redux-wrapper

I tried Optimistic updates for a better user experience.
Optimistic Updates with RTK Query

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 :)

code

original article is here