Next.js 13.4 App Router中React Query调用Dapr SDK遇模块缺失错误

问题根源 #

你在客户端组件中直接调用的getData函数依赖了fs、dns这类Node.js专属模块，而客户端组件运行在浏览器环境中，无法识别这些仅服务端可用的模块，因此抛出模块找不到的错误。

可行解决方案 #

方案1：通过API Route中转数据获取 #

将依赖Node.js模块的getData逻辑移到Next.js的API Route中，客户端组件通过React Query调用这个HTTP接口，让Node.js模块的代码在服务端执行：

1. 创建API Route文件（例如app/api/data/route.ts）：

import { NextResponse } from 'next/server';
import { getData } from '@/app/utils/api';

export async function GET() {
  try {
    const data = await getData();
    return NextResponse.json(data);
  } catch (err) {
    return NextResponse.json({ error: 'Failed to fetch data' }, { status: 500 });
  }
}

2. 客户端组件中通过React Query调用该接口：

'use client';
import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

export default function YourMUIClientComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['your-data-key'],
    queryFn: fetchData,
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  // 这里直接渲染你的MUI组件和数据
  return <div>数据：{JSON.stringify(data)}</div>;
}

方案2：使用Server Actions执行服务端数据获取 #

利用Next.js App Router的Server Actions特性，将getData包装成服务端动作，客户端组件通过React Query调用该动作，代码全程在服务端执行：

1. 定义Server Action文件（例如app/actions.ts）：

'use server';
import { getData } from '@/app/utils/api';

export async function fetchServerData() {
  return await getData();
}

2. 客户端组件中调用该Server Action：

'use client';
import { useQuery } from '@tanstack/react-query';
import { fetchServerData } from '@/app/actions';

export default function YourMUIClientComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['your-data-key'],
    queryFn: fetchServerData,
  });

  // MUI组件渲染逻辑同前
}

方案优势说明 #

这两个方案都能让依赖Node.js模块的代码在服务端执行，客户端仅处理接口返回的数据，完全避开浏览器环境的限制，同时你的MUI组件可以保持纯客户端渲染，不存在SSR兼容问题。

• API Route适合需要对外暴露数据接口的场景，兼容性更广；
• Server Actions代码更简洁，适合内部组件间的服务端数据交互（Next.js 13.4+默认启用，低版本需在next.config.js中配置experimental.serverActions: true）。

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