-1

I'm getting the error message:

Uncaught TypeError: _sanity_client__WEBPACK_IMPORTED_MODULE_2___default(...).fetch is not a function

I can't figure out why. Its referencing line about.js:11:1 which is the sanityClient line, but when any changes I make to it hasn't worked. Here's my code:

import React, { useState, useEffect }from 'react';
import './about.css'
import sanityClient from "@sanity/client";

export default function About() {

    const [aboutData, setAbout] = useState(null);

    useEffect(() => {
        sanityClient
            .fetch(`*[_type=="website_images"]{
                alt,
                about{
                    asset->{
                        _id,
                        url
                    }
                }
            }`)
            .then((data) => setAbout(data))
            .catch(console.error);
    }, [] );

    return (
        <main className="main-about">
            <div className="about-body">
                <div className="about-title">
                    <div className="title-line-left"></div>
                    <h2>about</h2>
                    <div className="title-line-right"></div>
                </div>
                <div className="about-text">
                    <p className="pronouns">(they/them)</p>
                    <p>The Japanese city and the Prefecture of Hiroshima may have been devastated by the atomic bomb over 76 years ago, but today, this site of the destruction is one of the top tourist destinations in the entire country. Statistics released by the nation's tourist agency revealed that around 363,000 visitors went to the metropolis during 2012, with Americans making up the vast majority of that figure, followed by Australians and Chinese.</p>
                </div>
            </div>
            {aboutData && aboutData.map((website_images, index) => (
            <figure className="photo-position">
                    <img src="{website_images.about.asset.url" alt="website_images.alt" className="about-photo"></img>
            </figure>
            ))}
        </main>
    )
}
paparonnie
  • 170
  • 8

1 Answers1

1

According to the sanity NPM documentation, you have to instantiate the client before using it, take a look: https://www.npmjs.com/package/@sanity/client

You're trying to use the fetch method as a static method from the class, when it doesn't exists, you need to instantiate the client with the info first, then use the fetch method.

Sanity docs

Lucas Henrique
  • 166
  • 7
  • Sorry I should have mentioned, I have already done this part. Though I've been following a tutorial from 2020 for both this and fetching, and she used 'export default' instead of 'const' – paparonnie Sep 01 '22 at 13:56
  • 1
    Actually you're not doing it in the mentioned code. You're just importing the class directly from the library and using it. At the third line, your import is from "@sanity/client" directly, not from a relative directory file where the instantiation is. – Lucas Henrique Sep 01 '22 at 13:59
  • Ah yeah, so I originally had 'import sanityClient from '../client.js', which caused the whole website to stop working, and I got a 'Uncaught TypeError: (0 , _sanity_client__WEBPACK_IMPORTED_MODULE_0__.sanityClient) is not a function' error, so I changed it to this with some advice on reddit. That brought everything else back, but then I got this issue. It was actually the last question I posted but I didn't get any answers. I'll try it out this way, but I'd appreciate it a tonne if you could have a look and see if I messed up somewhere. – paparonnie Sep 01 '22 at 14:05
  • https://stackoverflow.com/questions/73564770/uncaught-typeerror-0-sanity-client-webpack-imported-module-0-sanityclien is the link to that question if you're up for it – paparonnie Sep 01 '22 at 14:06
  • You should have kept with this code, but replace import { sanityClient } from "@sanity/client" for import sanityClient from "@sanity/client". This would have solved the problem. – Lucas Henrique Sep 01 '22 at 14:09
  • Okay, so I just tried that now, sanityClient is now underlined so it definitely did something right by that (thank you), but unfortunately I'm still getting the same issue (nothing on the page whatsoever, same error message). – paparonnie Sep 01 '22 at 14:15
  • If it's underline with a red line, it's not right. Check out the NPM docs for the right way of setting it up, maybe the tutorial you're following is not updated yet. If you look carefully the docs also mention a "apiVersion" parameter that is required at the client instantiation. – Lucas Henrique Sep 01 '22 at 16:22