CODEWITHSUNDEEP
typescriptnext.jssanity
ajay sharma
ajay sharma

Reputation: 151

TypeError: (0 , next_sanity__WEBPACK_IMPORTED_MODULE_0__.createImageUrlBuilder) is not a function

I am trying to make nextjs typescript project using sanity.io but im not able to solve this problem. itis showing that createImageUrlBuilder is not a function.

enter image description here

here is my sanity module

Upvotes: 1

Views: 6748

Answers (5)

Rutvik
Rutvik

Reputation: 16

When you want to import "urlFor" in your components, make sure you import like this...

import { urlFor } from "../lib/sanity";

Upvotes: 0

Rishi Pollai
Rishi Pollai

Reputation: 401

First install @sanity/image-url

$ npm install @sanity/image-url 
//or 
$ yarn add @sanity/image-url

import imageUrlBuilder from "@sanity/image-url";

export const urlFor = (source) => imageUrlBuilder(config).image(source);

use imageUrlBuilder instead of createImageUrlBuilder . It worked for me , Thanks!!

Upvotes: 2

Cogentx
Cogentx

Reputation: 176

createImageUrlBuilder is no longer wrapped by next-sanity and you'll need to install the dependency yourself (https://github.com/sanity-io/next-sanity#createimageurlbuilder-is-removed)

$ npm install @sanity/image-url
// or
$ yarn add @sanity/image-url

Notice also that createImageUrlBuilder is now a default import.

-import { createImageUrlBuilder } from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'

Upvotes: 16

theGateway
theGateway

Reputation: 121

First run this command

npm install --save @sanity/image-url

Import createImageUrlBuilder

import createImageUrlBuilder from "@sanity/image-url";

It worked for me this way.

Upvotes: 4

singhAmandeep007
singhAmandeep007

Reputation: 499

You need to pass the sanity client in createImageUrlBuilder instead of config.

import createClient from '@sanity/client';
import createImageUrlBuilder from '@sanity/image-url';


const config = sanityClient({
   projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, 
   
   ...
  });

export const  sanityClient = createClient(config);

export const urlFor = (source) => createImageUrlBuilder(client).image(source); // <-----------

Upvotes: 8

Related Questions