sanity: TypeError: url.parse is not a function

Hi there,

I have been stuck on this thing for a week now. I am trying to fetch data within a Vue (Vite) project, doing it exactly as this guide is showing: https://www.sanity.io/guides/create-a-single-page-application-with-vuejs-and-sanity

But I am getting an error called TypeError: url.parse is not a function while trying to fetch from my dataset.

Using:

• Vue 3.2.9
• Vite 2.5.4
• NodeJS 14.17.6
• @sanity/client 2.18.0
• @sanity/image-url 1.0.1

This is what I am trying:

projects.vue

<script>
import { onMounted, ref } from 'vue'

// sanity
import imageUrlBuilder from '@sanity/image-url'
import sanityConfig from '../../sanity-config'

const imageBuilder = imageUrlBuilder(sanityConfig)

export default {
  setup() {
    onMounted(() => {
      fetchProjects()
    })

    const groqQuery = `*[_type=="projects"]{
                        _id,
                        title
                      }[0...50]`

    const projects = ref([])
    let error = ref()

    const imageUrlFor = (source) => {
      return imageBuilder.image(source)
    }

    function fetchProjects() {
      console.log(sanityConfig)
      sanityConfig.fetch(groqQuery).then(
        (projectList) => {
          projects.value = projectList
          console.log(projects.value)
        },
        (errorList) => {
          error = errorList
          console.log(error)
        },
      )
    }

    return {
      projects,
      imageUrlFor,
    }
  },

}
</script>

FYI, console.log(sanityConfig) returns:

sanity-config.js

import sanityClient from '@sanity/client'

export default sanityClient({
  projectId: 'abCDef', // masked projectId
  dataset: 'production',
  apiVersion: '2021-06-07',
  useCdn: true,
  // useCdn: process.env.NODE_ENV === 'production',
})

The following error occurs in my console:

TypeError: url.parse is not a function
    at module.exports (index.js:10)
    at module.exports (browser-request.js:20)
    at index.js:57
    at Object.publish (index.js:18)
    at SanityObservableMinimal._subscribe (observable.js:22)
    at SanityObservableMinimal.Observable2._trySubscribe (Observable.ts:238)
    at SanityObservableMinimal.Observable2.subscribe (Observable.ts:219)
    at FilterOperator2.call (filter.ts:71)
    at SanityObservableMinimal.Observable2.subscribe (Observable.ts:214)
    at MapOperator2.call (map.ts:59)

index.js:10 is within this file: /node_modules/.pnpm/same-origin@0.1.1/node_modules/same-origin/index.js - which contains:

'use strict';

var url = require('url');

module.exports = function(uri1, uri2, ieMode) {
    if (uri1 === uri2) {
        return true;
    }

    var url1 = url.parse(uri1, false, true);
    var url2 = url.parse(uri2, false, true);

    var url1Port = url1.port|0 || (url1.protocol === 'https' ? 443 : 80);
    var url2Port = url2.port|0 || (url2.protocol === 'https' ? 443 : 80);

    var match = {
        proto: url1.protocol === url2.protocol,
        hostname: url1.hostname === url2.hostname,
        port: url1Port === url2Port
    };

    return ((match.proto && match.hostname) && (match.port || ieMode));
};

What am I doing wrong… I updated everything and followed several guides, amongst the one mentioned above.

Thank you for your time!