TypeError: _client_js__WEBPACK_IMPORTED_MODULE_2___default.a.fetch is not a function. How to solve this problem?

Question

I was using react hooks face this error blew.

import React, {useState, useEffect} from 'react'; import sanityClient from '../client.js'

 export default function Post() {
 const [postData, setPost] = useState(null);
   7 | 
   8 |    useEffect(() => {
>  9 |        sanityClient.fetch(
     | ^  10 |                  `*[_type == "post"]{
  11 |                  title,
  12 |                  slug,
                    mainImage{
                      asset => {
                          _id,
                          url
                      },
                      alt
                  }
              }`
        )
        .then((data) => setPost(data))
        .catch(console.error);
    }, []);

Answer 1

I had the same problem, after checking my code I found multiple error like:

• importing sanityClient from "@sanity/client" (that is not your case)

• mainImage{asset => {_id, url }, should be ``mainImage{asset -> {_id, url }with the dash and not with equal

so my suggest have a double check of your spelling

Answer 2

Make sure when you import sanity client, you have no Brackets (see below):

• import sanityClient from "@sanity/client";
• also, asset=> should be asset->