NextJS 13 and Mongoose drop OverwriteModelError sometimes

Question

I try use NextJS 13.4.12 with mongoose 7.4.2 I get OverrideModelError sometimes when I fetch RestAPI from web browser.

I uploaded the project to github: https://github.com/pzoli/homework4nextjs

My Difficulty.ts data definition is the following:

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

const difficultySchema = new Schema({
    name: {
        type: String,
        required: true,
    },
    value: {
        type: Number,
        required: true,
    },
});

export default mongoose.models.Difficulty || model("difficulty", difficultySchema);

My dbConnect.ts is this:

import mongoose, { connect } from "mongoose";

let cached: undefined | Promise<void>;
export default () => {
  if (mongoose.connections && mongoose.connections[0].readyState)
    return Promise.resolve();

  if (!cached) {
    cached = connect(process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/quiz')
      .then(() => console.log("connected to database."))
      .catch((err) => console.log("could not connect to database", err));
  }
  return cached;
}

The page.tsx in difficulty directory is:

"use client";

import React from 'react'
import { DataTable } from "primereact/datatable"
import { Column } from "primereact/column"
import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';

export default function Difficulty() {

    const { data: difficultyValues, status: dataFetchStatus, isLoading: isDataLoading } = useQuery({
        queryKey: ["difficulty"],
        queryFn: async () => {
            const res = await fetch(`/api/difficulty`, { cache: "no-cache" });
            return res.json();
        }
    });

    return (
        <>
            <DataTable value={difficultyValues} loading={isDataLoading}>
                <Column field='name' header="Name"></Column>
            </DataTable>
            <Link href="/">Home</Link>
        </>
    )
}

The route.ts is the following:

import Difficulty from "@/app/api/models/Difficulty";
import connection from "@/app/lib/dbConnect";
import { NextResponse } from "next/server";

export async function GET() {
    await connection();
    let result = await Difficulty.find({});
    return NextResponse.json(result);
}

My UserAnswer.ts code is following (referenced in error message, but not used any route.ts):

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

const userAnswerSchema = new Schema({
    question_answer_id: {
        type: Types.ObjectId,
        required: true,
        ref: 'questionanswer'
    },
    recorded_time: {
        type: Date,
        required: false,
    },
    user_id: {
        type: Types.ObjectId,
        required: true,
        ref: 'user'
    },
    thinkingtime: {
        type: Number,
        required: true,
    },
});

export default mongoose.models.UserAnswer || model("useranswer", userAnswerSchema);;

The whole error message is:

• [31merror[39m OverwriteModelError: Cannot overwrite useranswer model once compiled. at Mongoose.model (E:\work\integrity\Homeworks\homework4nextjs\node_modules\mongoose\lib\index.js:563:13) at eval (webpack-internal:///(rsc)/./app/api/models/UserAnswer.ts:28:184) at (rsc)/./app/api/models/UserAnswer.ts (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:82:1) at webpack_require (E:\work\integrity\Homeworks\homework4nextjs.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./app/api/models/QuestionAnswer.ts:7:69) at (rsc)/./app/api/models/QuestionAnswer.ts (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:72:1) at webpack_require (E:\work\integrity\Homeworks\homework4nextjs.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./app/api/models/Question.ts:7:73) at (rsc)/./app/api/models/Question.ts (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:62:1) at webpack_require (E:\work\integrity\Homeworks\homework4nextjs.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./app/api/question/route.ts:5:82) at (rsc)/./app/api/question/route.ts (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:92:1) at webpack_require (E:\work\integrity\Homeworks\homework4nextjs.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fquestion%2Froute&page=%2Fapi%2Fquestion%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fquestion%2Froute.ts&appDir=E%3A%5Cwork%5Cintegrity%5CHomeworks%5Chomework4nextjs%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=E%3A%5Cwork%5Cintegrity%5CHomeworks%5Chomework4nextjs&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:16:126) at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fquestion%2Froute&page=%2Fapi%2Fquestion%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fquestion%2Froute.ts&appDir=E%3A%5Cwork%5Cintegrity%5CHomeworks%5Chomework4nextjs%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=E%3A%5Cwork%5Cintegrity%5CHomeworks%5Chomework4nextjs&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:42:1) at webpack_require (E:\work\integrity\Homeworks\homework4nextjs.next\server\webpack-runtime.js:33:42) at webpack_exec (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:692:39) at E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:693:28 at Object. (E:\work\integrity\Homeworks\homework4nextjs.next\server\app\api\question\route.js:696:3) at Module._compile (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\cjs\loader.js:1255:14) at Module._extensions..js (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\cjs\loader.js:1309:10) at Module.load (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\cjs\loader.js:1113:32) at Module._load (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\cjs\loader.js:960:12) at Module.require (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\cjs\loader.js:1137:19) at require (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\modules\helpers.js:121:18) at requirePage (e:\work\integrity\Homeworks\homework4nextjs\node_modules\next\dist\server\require.js:112:75) at e:\work\integrity\Homeworks\homework4nextjs\node_modules\next\dist\server\load-components.js:80:84 at process.processTicksAndRejections (e:\work\integrity\Homeworks\homework4nextjs\lib\internal\process\task_queues.js:95:5) at async loadComponentsImpl (e:\work\integrity\Homeworks\homework4nextjs\node_modules\next\dist\server\load-components.js:80:26) at async DevServer.findPageComponentsImpl (E:\work\integrity\Homeworks\homework4nextjs\node_modules\next\dist\server\next-server.js:434:36) {name: 'OverwriteModelError', digest: undefined, stack: 'OverwriteModelError: Cannot overwrite useran…dules\next\dist\server\next-server.js:434:36)', message: 'Cannot overwrite useranswer` model once compiled.', Symbol(NextjsError): 'server'}

I run project with "npm run dev" command. If I run with "npm run build" and "npm run start" the error gone as I tested. The error is not appeare first time, refreshing page is needed sometimes. Please help find out how can I use it properly.

Answer 1

I tested out a solution. Just change the name capital upercase as your model nameed:

export default mongoose.models.Difficulty || model("Difficulty", difficultySchema);

and Camel case:

export default mongoose.models.UserAnswer || model("UserAnswer", userAnswerSchema);

And the error is disapeared.