使用Vercel Turbopack时出现模块未找到及Prisma适配问题

模块找不到错误的临时修复 #

你遇到的模块缺失报错如下：

./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-websocket.js:86:8
Module not found: Can't resolve '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client.ts'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js
./node_modules/next/dist/client/components/app-router.js
./node_modules/next/dist/client/app-call-server.js
./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js
./src/actions/register.ts
./components/auth/register-form.tsx
./src/pages/auth/register/index.tsx

修改package.json的启动脚本为next dev --turbo启用Turbopack，确实能解决这个模块找不到的问题，但会触发新的兼容性冲突。

Turbopack与Prisma的冲突解决 #

启用Turbopack后出现的问题，本质是当前Turbopack仅支持浏览器客户端场景，而Prisma数据库操作必须在服务器端环境运行。可以按以下方式处理：

• 回退到Webpack模式：把启动脚本改回next dev，放弃使用Turbopack，这是最省心的方式，能确保Prisma等服务器端依赖正常工作。
• 严格隔离服务器端代码：
  1. 确保db.ts（Prisma客户端实例）只在服务器组件、API路由或Server Actions里导入，绝对不要在客户端组件中引用。
  2. 检查register.ts中的认证逻辑：Server Actions默认是服务器端执行，但要确认没有在客户端组件里直接调用数据库操作代码。
• 等待官方更新：Turbopack还在迭代完善中，后续版本会逐步支持服务器端场景，可留意官方的更新日志。

内容的提问来源于stack exchange，提问作者ThomasTomanec