Nextjs 13 App Router：客户端组件无法导入@vinejs/vine模块求助

问题重现 #

客户端组件代码：

"use client"

import vine from "@vinejs/vine"; // 此处触发错误
export default function Test() {
  return <> </>
}

报错信息：

Failed to compile
node:dns/promises
Module build failed: UnhandledSchemeError: Reading from "node:dns/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

核心原因 #

@vinejs/vine 依赖 Node.js 内置的 dns 模块，而 Next.js 客户端组件运行在浏览器环境，无法访问 Node.js 专属的内置模块，因此编译时触发错误。此外，VineJS 的设计定位以服务端表单验证为主，本身对客户端环境的支持有限。

解决思路 #

1. 将验证逻辑迁移到服务端（推荐方案）

把表单验证逻辑放在API路由或服务端组件中，客户端仅负责收集和提交数据：

• 示例：创建 API 路由 /app/api/validate-form/route.ts

import vine from "@vinejs/vine";
import { NextResponse } from "next/server";

const schema = vine.object({
  email: vine.string().email(),
  password: vine.string().minLength(6),
});

export async function POST(request: Request) {
  const body = await request.json();
  try {
    const validatedData = await vine.validate({ schema, data: body });
    return NextResponse.json({ success: true, data: validatedData });
  } catch (error) {
    return NextResponse.json({ success: false, errors: error }, { status: 400 });
  }
}

• 客户端组件通过 fetch 提交数据到该 API，获取验证结果。

2. 替换为客户端友好的验证库

如果必须在客户端做验证，换用同时支持客户端和服务端的验证库，比如 Zod：

"use client"

import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

export default function Test() {
  const handleSubmit = (data: unknown) => {
    const result = schema.safeParse(data);
    if (!result.success) {
      // 处理验证错误
      console.log(result.error.issues);
    }
  };

  return <> {/* 表单内容 */} </>
}

3. 临时修改 Webpack 配置（不推荐）

通过配置 Next.js 的 Webpack，让客户端忽略 Node.js 内置模块，仅能解决编译报错，但运行时可能出现功能异常：
修改 next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        "dns": false, // 将 dns 模块解析为空
      };
    }
    return config;
  },
};

module.exports = nextConfig;

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