Skip to content
Get help on SlackWatch Sanity demo

Error with createImageUrlBuilder function in Sanity.io project

5 replies
Last updated: Mar 13, 2022
Hey guys, I was playing with sanity.io and was on a roll until I hit a snag with this error:
TypeError: (0 , next_sanity__WEBPACK_IMPORTED_MODULE_0__.createImageUrlBuilder) is not a function
  23 | export const sanityClient = createClient(config);
  24 | 
> 25 | export const urlFor = (source) => createImageUrlBuilder(config).image(source);
Below is my code:


import Head from 'next/head';
import Link from 'next/link';
import Header from '../components/header';
import Jumbotron from '../components/jumbotron';
import { sanityClient, urlFor } from '../sanity';
import { Post } from '../typings';

interface Props {
  posts: [Post];
}

export default function Home({ posts }: Props) {
  return (
    <div className="max-w-7xl mx-auto">
      <Head>
        <title>FAMI</title>
        <meta name="description" content="Felicia Alao Mummy Initiatives" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Header />
        <Jumbotron />
        <div>
          {posts.map((post) => {
            console.log(post);
            return (
              <>
                <Link key={post._id} href={`/post/${post.slug.current}`}>
                  <div>
                    <div className="p-10 cursor-pointer">
                      <p>{post.title}</p>
                      <p>{post.description}</p>
                      <p>by: {post.author.name}</p>
                    </div>
                    <img
                      src={urlFor(post.author.image).url()!}
                      alt={post.title}
                    />
                  </div>
                </Link>
              </>
            );
          })}
        </div>
      </main>
    </div>
  );
}

export const getServerSideProps = async () => {
  const query = `*[_type == "post"]{
  _id,
  title,
  slug,
  description,
  mainImage,
  author -> {
  name,
  image
}
}`;

  const posts = await sanityClient.fetch(query);

  return {
    props: {
      posts,
    },
  };
};
Mar 13, 2022, 5:19 AM
You are missing the important package i guess.

npm install --save @sanity/image-url

Import:


import React from 'react'
import myConfiguredSanityClient from './sanityClient'
import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(myConfiguredSanityClient)

function urlFor(source) {
  return builder.image(source)
}
Mar 13, 2022, 8:29 AM
user Q
- Thanks for the response, I sincerely appreciate your time. I did configured all that in my ‘sanity.js’ file:

import { createImageUrlBuilder, createClient } from 'next-sanity';

// lib/config.js
export const config = {
  /**
   * Find your project ID and dataset in `sanity.json` in your studio project.
   * These are considered "public", but you can use environment variables
   * if you want differ between local dev and production.
   *
   * <https://nextjs.org/docs/basic-features/environment-variables>
   **/
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  apiVersion: '2021-10-21', // Learn more: <https://www.sanity.io/docs/api-versioning>
  /**
   * Set useCdn to `false` if your application require the freshest possible
   * data always (potentially slightly slower and a bit more expensive).
   * Authenticated request (like preview) will always bypass the CDN
   **/
  useCdn: process.env.NODE_ENV === 'production',
};

export const sanityClient = createClient(config);

export const urlFor = (source) =&gt; createImageUrlBuilder(config).image(source);
Mar 13, 2022, 4:06 PM
npm install --save @sanity/image-url

That package you are using createImageUrlBuilder doesn't work anymore. Please, check the import from my code and example see if this helps.
Mar 13, 2022, 4:09 PM
Thank you 🙏
Mar 13, 2022, 4:10 PM
Very welcome let me know if this works for you!
Mar 13, 2022, 4:11 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in