TypeError: url.parse is not a function

[robinvoor]

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/[email protected]/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!

[j-adom]

I'm finding the same error as I convert a site from sapper to svelte-kit. Sounds like something Vite related?

[robinvoor]

Well, the guide mentioned at the top of my original post is also using Vite, where it is working. Maybe a new version is causing the problem?

[jmroon]

Same here. How do I get around this? Can't use this with SvelteKit at the moment.

[jmroon]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url.

Easiest way to get around it: add url to your dependencies.

npm install url or yarn add url

Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

[AmodeusR]

Thanks @jmroon ! The problem persists, but what you told solved it :)

[ceduklein]

Thanks @jmroon ! I had the same problem.

[Phosah]

Thanks so much @jmroon . Struggled with this for over 18hrs

[aviral17]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url.

Easiest way to get around it: add url to your dependencies.

npm install url or yarn add url

Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

Hi Brother, I am using React with Vite and Sanity, still facing the same problem with Sanity, nothing is working, I have installed url with npm still same problem persists. Please help me.

[Mwawaka]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url.

Easiest way to get around it: add url to your dependencies.

npm install url or yarn add url

Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

Thanks! It was very helpful.

[Husain01]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url. Easiest way to get around it: add url to your dependencies. npm install url or yarn add url Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2 Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

Hi Brother, I am using React with Vite and Sanity, still facing the same problem with Sanity, nothing is working, I have installed url with npm still same problem persists. Please help me.

Yes it doesn't seem to be working with React in Vite

[hisreal123]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url.

Easiest way to get around it: add url to your dependencies.

npm install url or yarn add url

Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

this isn't working with React on Vite , Any help ?

[kamotekiddev]

This appears to happen because of one of Sanity's dependencies (same-origin) requires a node built-in: url.

Easiest way to get around it: add url to your dependencies.

npm install url or yarn add url

Another option is to add a polyfill to both esbuild and rollup, but that's more involved and I'm not sure if there's much benefit: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Ideally, sanity can remove the dependency on same-origin, as it's a rather small package to rewrite without a node built-in. Alternatively, if they provided url as a required dependency, that would be a quick patch in the meantime.

this is not working with react and vite. help

[wilsonibekason]

Please i am having the same problem in react and vite

[jmroon]

I can't offer a solution yet in React w/ Vite as I haven't tried it, but I would look at the link I posted and use the rollup url polyfill. I don't see any reason that wouldn't solve the problem.

[rexxars]

Since this was reported, we've done new releases of both sanity, @sanity/client and other ecosystem modules that should improve our cross-platform/cross-environment support. Closing this for now, but please leave a comment if you're still having issues on the later versions of these modules.

[bitdom8]

New vite does that: TypeError: parse is not a function

solution is here: https://github.com/sanity-io/sanity/issues/2751#issuecomment-1020225317