Tengo una aplicación Next.js con mongoose para conectarme a mi mongodb. Los modelos importan db.ts para asegurarse de que haya una conexión activa a la base de datos de la siguiente manera:
import { model, models, Schema } from "mongoose"; import "../../db";Este es el código que se conecta a mi base de datos:
import mongoose from "mongoose"; mongoose.connect("mongodb://admin:admin@localhost:27022/admin"); Seguí adelante e hice algunas funciones sin servidor en next.js y agregué algunas bases de datos de los modelos en mi getServerSideProps . Todo lo cual funcionó perfectamente bien. Puedo interactuar con los modelos, crear nuevos Documentos, eliminarlos y actualizarlos. no hay problemas
El problema
Recientemente agregué un nuevo componente: está en /pages/flashcards/[id].tsx . Al igual que mis otros componentes, este importa uno de mis modelos de mangosta. Sin embargo, por alguna razón, Webpack siente que debería agrupar el modelo y su importación de ../../db y enviarlo y enviarlo al cliente, lo que da como resultado este error:
TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect no es una función
Nuevamente: esto no sucede con ninguno de mis otros componentes que usan exactamente los mismos modelos que el componente que tiene estos problemas.
El problema ocurre porque tiene la siguiente importación sin usar en la /pages/flashcards/[id] .
import question from "../../db/models/question"; Next.js elimina cualquier código dentro getServerSideProps o getStaticProps , y las importaciones utilizadas exclusivamente por estos métodos, al compilar el paquete de cliente.
Sin embargo, dado que la question no se usa explícitamente en getServerSideProps , Next.js no puede darse cuenta de que la importación solo debe usarse en el servidor. Esto significa que se incluirá tanto en el paquete del servidor como en el del cliente.
Puede usar la herramienta de eliminación de código de Next.js para verificar qué elimina Next.js del paquete del lado del cliente. Verá que si ejecuta el código de su página a través de él, la importación no se elimina. Sin embargo, tan pronto como lo haga referencia y lo use dentro de getServerSideProps , Next.js lo eliminará automáticamente de las importaciones.
Asegúrate de comentar/eliminar siempre las importaciones no utilizadas (hay reglas de linting para ayudarte a hacerlo).
¿Ha intentado actualizar el próximo paquete npm a la última versión? (12.0.8 a partir de este escrito). Tuve un problema similar con Next que daba errores inconsistentes entre diferentes rutas API, todas configuradas de la misma manera pero algunas generaban el mismo TypeError que compartiste. Actualizar el paquete resolvió el problema para mí.