I'm following along a javascript tutorial, and suddenly localhost:3000 is not displaying anything but a white page after making some changes in my About.jsx file.

It started happening after I added:

import { urlFor, client } from '../../client';

and

const [abouts, setAbouts] = useState([]);

  useEffect(() => {
    const query = '*[_type == "abouts"]';

    client.fetch(query)
      .then((data) => {
        setAbouts(data);
      })
  }, []); 

If I undo the changes, hit save after adding one change at a time, it's fine. But once all of them are in place, Chrome doesn't display anything.

I've tried adding an error in my code to see what happens, and the browser immediately picks up on it displaying it in red, so apparently it's not NOT working.

Any idea what's happening? I've also tried deleting all cookies/browser history/caches with no luck.

EDIT: Tested a bit more now, and it really seems like the import is the culprit here. I followed the tutorial to a t, but one thing that puzzled me was that I have no folder called client. It's a client.js file inside my src folder, but that's what the tutorial dude did, and so far in the video it still works for him, so... still confused.

My client.js file looks like this:

import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = 'sanityClient'({
    projectID: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'production',
    apiVersion: '2022-02-01',
    useCDN: true,
    token: process.env.REACT_APP_SANITY_TOKEN
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);