Issue with Pushing Data into Mongo Database Using TypeScript and Next.js
Greetings, I am currently working on a project using TypeScript with Node/Next.js 13, the new app router, and Mongoose to push data into a MongoDB database. However, I am encountering an error that states: "TypeError: Cannot read properties of undefined (reading 'json').". Although the payload is visible in the browser's Network section, it is not being successfully passed to the database. As a newcomer to Next.js and TypeScript, I acknowledge that I may have overlooked something obvious, but I have exhausted numerous solutions without success. Any assistance would be greatly appreciated!
The objective is to insert data into the database upon creating a new product.
product/new/page.tsx
"use client"
import Plan from "@/app/components/Plan";
import axios from "axios";
import { useState } from "react";
...
src/app/api/products/page.ts
import { NextApiRequest, NextApiResponse } from "next";
import { NextResponse } from "next/server";
import { mongooseConnect } from "../../../../lib/mongoose";
import { Product } from "../../../../models/Product";
...
The console output when attempting to troubleshoot the 'res.json' response:
{ res: undefined } { req: { params: {}, searchParams: {} } }models/Product.ts
import mongoose, { Schema } from "mongoose";
...
lib/mongoose.ts
import mongoose from "mongoose";
...
lib/mongodb.ts
// Implementation sourced from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient } from "mongodb";
...
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "models/Product.js", "src/app/api/products/page.js", "src/app/api/products.js"],
"exclude": ["node_modules"]
}