Nextjs v 13 - TypeError: Cannot read properties of null (reading \'length\')答案

【问题标题】：Nextjs v 13 - TypeError: Cannot read properties of null (reading 'length')Nextjs v 13 - TypeError: Cannot read properties of null (reading \'length\')
【发布时间】：2022-11-20 10:27:46
【问题描述】：

I am trying to learn how to make a nextjs app with this egghead tutorial. I am stuck on lesson 4 which shows how to read data from a supabase db.

I think the issue might have something to do with a change in nextjs v 13. This post has a suggestion, which is to change the Home function into a const with an arrow in it. I tried it as follows but still can't get the code to work as demonstrated.

import { supabase } from '../utils/supabase'

const Home = ({lessons}) => {
  
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      {lessons.map( lesson => (
        <p key={lesson.id}>{lesson.title}</p>
      ))}
    </div>
  )
}

export default Home;

export const getStaticProps = async () => {
  const { data: lessons } = await supabase.from('lesson').select('*')

  return { props: { lessons } }
}

My error message is in the browser is:

Error: Failed to fetch update manifest Internal Server Error at http://localhost:3000/_next/static/chunks/webpack.js?ts=1668894571923:1188:37

My error message in the terminal is:

TypeError: Cannot read properties of null (reading 'length') at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)

Does anyone know what the changes are that are required in order to update an outdated nextjs to work with next v13? I can't make sense of the nextjs update documentation.

【问题讨论】：

is this the component that causing error? if you comment out all the functions just leave an empty compoent, will it still throw same error?
It's the only thing in the app so far. I can type text above and below the supabase call and the text renders on the screen but the supabase call shows an error
did you setup experimental app directory?
I don't know what that means. I followed the instructions in steps 1 - 4 of the egghead tutorial
what is your next version

标签： next.js

【解决方案1】：

This looks like a bug caused by v13.0.3 of Next.js. I opened a PR (https://github.com/vercel/next.js/pull/43145) with a potential fix.

In the meantime, you may be able to get around this by downgrading to 13.0.2.

【讨论】：