Now Mongoose Cannot overwrite model once compiled

Question

I'm using MongoDB Atlas to host the DB and just querying data with this severless function:

import { NextApiRequest, NextApiResponse } from "next";

// models
import { Section } from "../../../models/Section";

// db connection
import { useDatabase } from "../../../middleware/useDatabase";

async function find(req: NextApiRequest, res: NextApiResponse) {
  const { content } = req.query;
  const response = await Section.find({ contentType: content });
  res.send(response);
}

export default useDatabase(find);

The middleware useDatabase is configured like this:

import * as mongoose from "mongoose";
import { NextApiRequest, NextApiResponse } from "next";

export const useDatabase = handler => async (req: NextApiRequest, res: NextApiResponse) => {
  if (mongoose.connections[0].readyState) return handler(req, res);
  // Using new database connection
  await mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useFindAndModify: false,
    useUnifiedTopology: true
  });

  return handler(req, res);
}

The first time I execute the query doing a fetch to the api, works well, then if I edit some code, save it and now dev recompile the code, I got this error when I do the query again:

MongooseError [OverwriteModelError]: Cannot overwrite `Section` model once compiled.
    at new OverwriteModelError (/home/andres/Documents/shooter-app/node_modules/mongoose/lib/error/overwriteModel.js:20:11)
    at Mongoose.model (/home/andres/Documents/shooter-app/node_modules/mongoose/lib/index.js:521:13)
    at Module../models/Section.ts (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:154:63)
    at __webpack_require__ (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:23:31)
    at Module../pages/api/sections/[content].ts (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:198:73)
    at __webpack_require__ (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:23:31)
    at Object.3 (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:233:18)
    at __webpack_require__ (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:23:31)
    at /home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:91:18
    at Object.<anonymous> (/home/andres/Documents/shooter-app/.next/server/static/development/pages/api/sections/[content].js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at DevServer.handleApiRequest (/home/andres/Documents/shooter-app/node_modules/next/dist/next-server/server/next-server.js:420:28)
    at async Object.fn (/home/andres/Documents/shooter-app/node_modules/next/dist/next-server/server/next-server.js:350:37)
    at async Router.execute (/home/andres/Documents/shooter-app/node_modules/next/dist/next-server/server/router.js:42:32)
    at async DevServer.run (/home/andres/Documents/shooter-app/node_modules/next/dist/next-server/server/next-server.js:468:29) {
  message: 'Cannot overwrite `Section` model once compiled.',
  name: 'OverwriteModelError'
}

How can I solve it? Thank you!

Answer 1

This happens when the development server tries to recompile your model during hot module replacement.

You can prevent this from happening by changing your code to check whether the model has already been compiled when exporting it.

export default mongoose.models['Section'] || mongoose.model('Section', SectionSchema);