React Query useMutation报错：__privateGet(...).defaultMutationOptions不是函数的解决方法

报错信息：

Unexpected Application Error!
__privateGet(...).defaultMutationOptions is not a function
TypeError: __privateGet(...).defaultMutationOptions is not a function
    at _a11.setOptions (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-query.js?v=bed8f3cb:2579:49)
    at new _a11 (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-query.js?v=bed8f3cb:2568:10)
    at ...

相关代码 #

Register 组件： #

import { useForm } from "react-hook-form";
import { registerUser } from "../apis/Authentication";
import { useMutation } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";

const Register = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const navigate = useNavigate();

  const mutation = useMutation(registerUser, {
    onSuccess: (data) => {
      console.log("User registered:", data);
      alert("Registration Successful!");
      navigate("/login-user");
    },
    onError: (error) => {
      console.error("Registration failed:", error);
      alert(error.response?.data?.message || "Registration failed");
    },
  });

  const onSubmit = (formData) => mutation.mutate(formData);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="Username" />
      {errors.username && <p>{errors.username.message}</p>}
      <button type="submit">Register</button>
    </form>
  );
};

export default Register;

Axios 实例配置： #

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:5000/api",
  withCredentials: true,
  headers: { "Content-Type": "multipart/form-data" },
});

export default axiosInstance;

注册接口： #

import axiosInstance from "../axiosInstance.js";

const registerUser = async (userData) => {
  const response = await axiosInstance.post("/user/register-user", userData);
  return response.data;
};

export { registerUser };

已尝试的解决方案（无效） #

• 重新安装依赖：删除node_modules和package-lock.json后执行npm install
• 降级React Query至v4.x版本
• 更新Node.js至最新LTS版本

解决方案 #

这个报错核心原因是React Query v5版本的useMutation参数结构发生了破坏性变更，你当前的调用方式是v4及更早版本的写法，完全不适用于v5。

修改useMutation的调用逻辑，将请求函数放入mutationFn配置项中，改用对象参数形式：

const mutation = useMutation({
  mutationFn: registerUser,
  onSuccess: (data) => {
    console.log("User registered:", data);
    alert("Registration Successful!");
    navigate("/login-user");
  },
  onError: (error) => {
    console.error("Registration failed:", error);
    alert(error.response?.data?.message || "Registration failed");
  },
});

如果坚持使用v4的旧写法，需要确保package.json中@tanstack/react-query的版本号锁定为^4.0.0，然后重新执行npm install确保依赖完全匹配。

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