Unexpected Application Error! this[#client].defaultMutationOptions is not a function

Question

UPDATE: Solved the issue. It was a problem with the version of @tanstack/react-query. I used the v5 and had this problem and did a downgrade to v4. Now it works fine!

I'm always getting this error when I use 'useMutation' in my Share.jsx (React Project).

This is what my code looks like when I get an error:

import "./share.scss";
import Image from "../../assets/img.png";
import Map from "../../assets/map.png";
import Friend from "../../assets/friend.png";
import { useContext, useState } from "react";
import { AuthContext } from "../../context/authContext";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { makeRequest } from "../../axios.js";

const Share = () => {
  const [file, setFile] = useState(null);
  const [desc, setDesc] = useState("");

  const { currentUser } = useContext(AuthContext);
  const queryClient = useQueryClient();

  const mutation = useMutation(
    (newPost) => makeRequest.post("/posts", newPost),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(["posts"]);
        setDesc("");
        setFile(null);
      },
    }
  );

  const handleClick = (e) => {
    e.preventDefault();
    mutation.mutate({ desc });
  };

  return (
    <div className="share">
      <div className="container">
        <div className="top">
          <img src={currentUser.profilePic} alt="" />
          <input
            type="text"
            placeholder={`What's on your mind ${currentUser.name}?`}
            onChange={(e) => setDesc(e.target.value)}
          />
        </div>
        <hr />
        <div className="bottom">
          <div className="left">
            <input
              type="file"
              id="file"
              style={{ display: "none" }}
              onChange={(e) => setFile(e.target.files[0])}
            />
            <label htmlFor="file">
              <div className="item">
                <img src={Image} alt="" />
                <span>Add Image</span>
              </div>
            </label>
            <div className="item">
              <img src={Map} alt="" />
              <span>Add Place</span>
            </div>
            <div className="item">
              <img src={Friend} alt="" />
              <span>Tag Friends</span>
            </div>
          </div>
          <div className="right">
            <button onClick={handleClick}>Share</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Share;

My errors:

Error handled by React Router default ErrorBoundary: TypeError: this[#client].defaultMutationOptions is not a function
    at MutationObserver.setOptions (mutationObserver.ts:61:1)
    at new MutationObserver (mutationObserver.ts:45:1)
    at useMutation.ts:26:1
    at mountState (react-dom.development.js:16818:1)
    at Object.useState (react-dom.development.js:17546:1)
    at Object.useState (react.development.js:1617:1)
    at useMutation (useMutation.ts:26:1)
    at Share (Share.jsx:17:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at mountIndeterminateComponent (react-dom.development.js:20838:1)

react-dom.development.js:18525 The above error occurred in the <Share> component:

    at Share (http://localhost:3000/static/js/bundle.js:2229:74)
    at div
    at Home
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:59248:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:59898:26)
    at div
    at div
    at div
    at QueryClientProvider (http://localhost:3000/static/js/bundle.js:73986:5)
    at Layout
    at ProtectedRoute (http://localhost:3000/static/js/bundle.js:118:7)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:59248:5)
    at RenderErrorBoundary (http://localhost:3000/static/js/bundle.js:59189:5)
    at DataRoutes (http://localhost:3000/static/js/bundle.js:57678:5)
    at Router (http://localhost:3000/static/js/bundle.js:59923:15)
    at RouterProvider (http://localhost:3000/static/js/bundle.js:57461:5)
    at div
    at App (http://localhost:3000/static/js/bundle.js:58:56)
    at AuthContextProvider (http://localhost:3000/static/js/bundle.js:2622:5)
    at DarkModeContextProvider (http://localhost:3000/static/js/bundle.js:2733:5)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.

hooks.tsx:630 React Router caught the following error during render 
TypeError: this[#client].defaultMutationOptions is not a function
    at MutationObserver.setOptions (mutationObserver.ts:61:1)
    at new MutationObserver (mutationObserver.ts:45:1)
    at useMutation.ts:26:1
    at mountState (react-dom.development.js:16818:1)
    at Object.useState (react-dom.development.js:17546:1)
    at Object.useState (react.development.js:1617:1)
    at useMutation (useMutation.ts:26:1)
    at Share (Share.jsx:17:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at mountIndeterminateComponent (react-dom.development.js:20838:1)
 
Object

And this is the temporary solution I found. This code works fine but unfortunately I need 'useMutation' to see the results on the page directly without reloading the page:

import "./share.scss";
import Image from "../../assets/img.png";
import Map from "../../assets/map.png";
import Friend from "../../assets/friend.png";
import { useContext, useState } from "react";
import { AuthContext } from "../../context/authContext";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { makeRequest } from '../../axios.js';

const Share = () => {
  const [file, setFile] = useState(null);
  const [desc, setDesc] = useState("");

  const { currentUser } = useContext(AuthContext);

  const queryClient = useQueryClient();

  /*
  const mutation = useMutation(
    (newPost) => {
      return makeRequest.post("/posts", newPost);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries(["posts"]);
      },
    }
  );
  */
  
  const handleClick = (e) => {
    e.preventDefault();
    //mutation.mutate({ desc });

      // Prepare the post data
    const postData = {
      desc,
      // Add other post details here if needed (e.g., file data)
    };

    // Make the API request using axios or fetch
    makeRequest.post("/posts", postData)
      .then((response) => {
        console.log("Post created successfully:", response.data);
        // Clear the description and file state (optional)
        setDesc("");
        setFile(null);
        // You can also show a success message to the user here
      })
      .catch((error) => {
        console.error("Error creating post:", error);
        // Handle errors appropriately (e.g., display an error message)
      });
  };

  return (
    <div className="share">
      <div className="container">
        <div className="top">
          <img
            src={currentUser.profilePic}
            alt=""
          />
          <input type="text" placeholder={`What's on your mind ${currentUser.name}?`} onChange={(e) => setDesc(e.target.value)} />
        </div>
        <hr />
        <div className="bottom">
          <div className="left">
            <input type="file" id="file" style={{ display: "none" }} onChange={(e) => setFile(e.target.files[0])} />
            <label htmlFor="file">
              <div className="item">
                <img src={Image} alt="" />
                <span>Add Image</span>
              </div>
            </label>
            <div className="item">
              <img src={Map} alt="" />
              <span>Add Place</span>
            </div>
            <div className="item">
              <img src={Friend} alt="" />
              <span>Tag Friends</span>
            </div>
          </div>
          <div className="right">
            <button onClick={handleClick}>Share</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Share;

I already checked my dependencies and upgraded to @tanstack/react-query@latest.

Best Regards Daniel

I already upgraded to @tanstack/react-query@latest but the same error occurs everytime I try to enter this page.

UPDATE: Solved the issue. It was a problem with the version of @tanstack/react-query. I used the v5 and had this problem and did a downgrade to v4. Now it works fine!