Estoy siguiendo un tutorial de JavaScript y, de repente, localhost: 3000 no muestra nada más que una página en blanco después de realizar algunos cambios en mi archivo About.jsx.

Comenzó a suceder después de que agregué:

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

y

 const [abouts, setAbouts] = useState([]); useEffect(() => { const query = '*[_type == "abouts"]'; client.fetch(query) .then((data) => { setAbouts(data); }) }, []);

Si deshago los cambios, presiono guardar después de agregar un cambio a la vez, está bien. Pero una vez que todos están en su lugar, Chrome no muestra nada.

Intenté agregar un error en mi código para ver qué sucede, y el navegador lo detecta de inmediato y lo muestra en rojo, por lo que aparentemente NO funciona.

¿Alguna idea de lo que está pasando? También intenté eliminar todas las cookies/historial del navegador/cachés sin suerte.

EDITAR: probado un poco más ahora, y realmente parece que la importación es la culpable aquí. Seguí el tutorial hasta at, pero una cosa que me desconcertó fue que no tengo una carpeta llamada cliente. Es un archivo client.js dentro de mi carpeta src, pero eso es lo que hizo el amigo del tutorial, y hasta ahora en el video todavía funciona para él, así que... todavía confundido.

Mi archivo client.js se ve así:

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