Updated my Next.js project to v13 Appendix: Troubleshooting
Tags: nextjs, react
Published: 2023-05-28 23:24:51

This is a series of my memo from when I migrated Next.js v13 into my project with the article [From Pages to App](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs). 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](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part1-migrated-app-router-27c3ce172bba)

[Part2: Migrated router API](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-hooks-for-app-router-38a82a8e5b0)

[Part3: Applied some other Next.js v13 updates](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-link-use-client-3f5e17d12b8f)

[Optional: Updated NextAuth from v3 to v4](https://medium.com/@lada496/updated-nextauth-from-v3-to-v4-4210f2b994e3)

[Optional: Updated Redux from classical Redux to Redux Toolkit Query](https://medium.com/@lada496/optimistic-updates-with-rtk-query-4770698de6c1)

## Vague error messages

### **Error: React Context is unavailable in Server Components**

You have to put "use client" to use "[SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider)" provided by nextAuth because it uses React Context behind the scene.

![error message from SessionProvider](https://cdn-images-1.medium.com/max/3748/1*BwwbLsGneX9h6i6P0DHepA.png)

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**](https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/)
[**Add NextAuth to NextJS 13 and Authenticate with GitHub**](https://blog.bitsrc.io/adding-nextauth-to-nextjs-13-and-authenticating-with-github-40539ca6a81c)

### 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.

![error message from Redux](https://cdn-images-1.medium.com/max/3740/1*RQk_vkY0xg8vrth2vAhy1g.png)

### **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 message from redux](https://cdn-images-1.medium.com/max/3776/1*MBbOs_qc3s1CibUE21QFFw.png)
[**Redux Essentials, Part 8: RTK Query Advanced Patterns | Redux**](https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#implementing-optimistic-updates)

### **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).

![error message from redux](https://cdn-images-1.medium.com/max/3784/1*86JL9qDiufDemlQYlVvNDw.png)

## 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.

![](https://cdn-images-1.medium.com/max/2872/1*y46Bne3tBK2AhS20ENDObw.png)

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**](https://nextjs.org/docs/app/building-your-application/styling/css-modules#additional-features)

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**](https://github.com/kirill-konshin/next-redux-wrapper/issues/494)

I tried Optimistic updates for a better user experience.
[**Optimistic Updates with RTK Query**](https://medium.com/@lada496/optimistic-updates-with-rtk-query-4770698de6c1)

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](https://github.com/Lada496/benlya)

original article is [here](https://medium.com/@lada496/updated-my-next-js-project-to-v13-appendix-troubleshooting-26b9492c227)