Webpack用Next.js包文件，它不应该在客户端包中

Question

我有一个带有猫鼬的Next.js应用程序可以连接到我的mongodb。模型导入db.ts以确保与数据库有活动连接，如下所示：

import { model, models, Schema } from "mongoose";
import "../../db";

这是连接到我的数据库的代码：

import mongoose from "mongoose";
mongoose.connect("mongodb://admin:admin@localhost:27022/admin");

我在next.js中做了一些没有服务器的函数，并从getServerSideProps中的模型中添加了一些数据库。一切都很好。我可以与模型交互，创建新文档，删除它们并更新它们。没有任何问题。

问题

我最近添加了一个新组件:它在/pages/flashcards/[id].tsx。就像我的其他组件，这个导入我的猫鼬模型之一。然而，出于某种原因，Webpack认为应该将模型及其导入的../../db 捆绑在一起，并将其发送到客户端，从而导致以下错误：

mongoose__WEBPACK_IMPORTED_MODULE____default(...).connect不是一个函数

再说一遍:我的任何其他组件都不会使用与有这些问题的组件完全相同的模型。

Answer 1

发生此问题是因为/pages/flashcards/[id]页面中有以下未使用的导入。

import question from "../../db/models/question";

在构建客户端包时，getServerSideProps或getStaticProps中的任何代码，以及这些方法专门使用的导入，都会被Next.js删除。

但是，由于question没有显式地在getServerSideProps中使用，所以Next.js无法确定导入仅用于服务器。这意味着它将同时包含在服务器和客户端包中。

您可以使用Next.js码消除工具来验证Next.js从客户端包中消除了什么。您将看到，如果您在其中运行页面的代码，导入就不会被删除。但是，一旦您在getServerSideProps中引用并使用它，Next.js就会自动从导入中删除它。

确保始终注释掉/删除未使用的导入(有可以帮助您这样做的链接规则)。

Answer 2

您是否尝试过将下一个npm包升级到最新版本？(截至撰写本文时的12.0.8)。我遇到了一个类似的问题，接下来在不同的API路由之间出现不一致的错误，所有这些都是以相同的方式配置的，但也有一些引发了您共享的相同的TypeError。升级包解决了我的问题。