带有 Next.js 捆绑文件的 Webpack 不应该在客户端捆绑中

Question

我有一个带有 mongoose 的 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 的导入捆绑在一起，然后将其发送并发送给客户端，从而导致此错误：

TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect 不是函数

再次重申：我的任何其他组件都不会发生这种情况，这些组件使用与出现这些问题的组件完全相同的模型。

Answer 1

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

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

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

但是，由于question 没有在getServerSideProps 中明确使用，Next.js 无法确定导入仅用于服务器。这意味着它将包含在服务器和客户端捆绑包中。

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

确保始终注释掉/删除未使用的导入（有 linting 规则可以帮助您做到这一点）。

Answer 2

您是否尝试过将下一个 npm 包升级到最新版本？ （撰写本文时为 12.0.8）。我有一个类似的问题 Next 在不同的 API 路由之间给出了不一致的错误，所有配置的方式都相同，但有些会引发你共享的相同 TypeError。升级包为我解决了这个问题。