Mongoose y NextJS: type error Cannot read properties of null (reading 'get')

Question

Im a new coder! Im having troubles with a tutorial, client side is throwing me this error (screenshot of error in client)

and this is the full error code in console

Uncaught TypeError: Cannot read properties of null (reading 'get')
at setupTimestamps (browser.umd.js?eea8:10831:1)
at Schema.setupTimestamp (browser.umd.js?eea8:14879:1)
at new Schema (browser.umd.js?eea8:13530:1)
at eval (webpack-internal:///./src/models/task.js:5:18)
at ./src/models/task.js (index.js?ts=1660116218062:840:1)
at options.factory (webpack.js?ts=1660116218062:661:31)
at __webpack_require__ (webpack.js?ts=1660116218062:37:33)
at fn (webpack.js?ts=1660116218062:316:21)
at eval (webpack-internal:///./src/pages/index.js:9:69)
at ./src/pages/index.js (index.js?ts=1660116218062:851:1)
at options.factory (webpack.js?ts=1660116218062:661:31)
at __webpack_require__ (webpack.js?ts=1660116218062:37:33)
at fn (webpack.js?ts=1660116218062:316:21)
at eval (?2c9a:5:16)
at eval (route-loader.js?ea34:211:51)

This is my code in the schema definition. Im working with Next.js and mongoose Backend just work find. And how u can see in screenshot client fetch the elements right.

`

import { Schema, model, models } from "mongoose";

const taskSchema = new Schema(
  {
    title: {
      type: String,
      required: [true, "The Task title is required "],
      unique: true,
      trim: true,
      maxlength: [40, "title cannot be grater than 40 characters"],
    },
    description: {
      type: String,
      required: true,
      trim: true,
      maxlength: [200, "title cannot be grater than 200 characters"],
    },
  },
  {
    timestamps: true,
    versionKey: false
  }
)

export default models.Task || model("Task", taskSchema);

an this is my main component in the frontend

import { Button, Card, CardHeader, Container, Divider, Grid } from "semantic-ui-react";
import task from "models/task";

export default function HomePage({tareas}) {
  return (

    <Container>
      <Card.Group itemsPerRow={4}>
        {
          tareas.map(tarea => (
            <Card key={tarea._id}>
              <Card.Content>
                <Card.Header>{tarea.title}</Card.Header>
              </Card.Content>
            </Card>
          ))
        }
      </Card.Group>
    </Container>
  )
}




export const getServerSideProps = async (ctx) => {
  
  const res = await fetch('http://localhost:3000/api/tasks/');
  const tareas = await res.json();
  
  return{
    props: {
        tareas
    }
  }
}

I dont know whats going on.