CODEWITHSUNDEEP
javascriptnode.jsreactjslocalhost
stina
stina

Reputation: 19

Localhost:3000 not displaying anything after changing code

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);

Upvotes: 0

Views: 566

Answers (1)

stina
stina

Reputation: 19

I found the error, and now I'm deciding between jumping for joy or just jumping into a lake, lol.

Apparently, it IS a big deal if you write 'projectID' when it should be 'projectId'..!

Who knew! Happy Saturday, everyone :)

EDIT: And I had to remove the '' from

export const client = sanityClient({

I thought about deleting this question since I figured it out myself, but maybe this will be to some help for anyone else sometime, so I'll leave it up.

Upvotes: 1

Related Questions