Error when navigating to `/blog` in next.js project-CodePudding

The Problem:

I'm building a blog with Next and sanity. When navigating to /blog, i'm encountering this error in the browser:

./sanity.js:2:0
Module not found: Can't resolve '@sanity/image-url'
  1 | import { createCurrentUserHook, createClient } from "next-sanity";
> 2 | import imageUrlBuilder from "@sanity/image-url";
  3 | 
  4 | export const config = {
  5 |   // Find your project ID and dataset in 'sanity.json' in your studio project.

Import trace for requested module:
./pages/blog.tsx

https://nextjs.org/docs/messages/module-not-found

The folder structure is:

root
-> components
-> pages
    -> post
        -> [slug].tsx
    -> index.tsx
    -> blog.tsx
-> sanity subfolder
-> public
-> styles
sanity.js (config file)

The sanity config file

I have a sanity config file, which exports some helper functions. One of which, is the imageUrlBuilder function, which i'm assuming the error is coming from. Here is my sanity config file: Note: this is pulled from sanity docs.

import { createCurrentUserHook, createClient } from "next-sanity";
import imageUrlBuilder from "@sanity/image-url";

export const config = {
  // config info here
};

// Set up the client for fetching data in the getProps page functions.
export const sanityClient = createClient(config);

// Builder function to combo with urlFor function.
const builder = imageUrlBuilder(sanityClient);

// Helper function to generate urls from sanity photos.
export const urlFor = (source) => {
  return builder.image(source);
};

The helper function was working in a previous version, and was able to pull images from sanity and display in the document. But i'm unsure why it's causing issues with page routing.

The blog page component:

import React from "react";
import BlogPreview from "../components/BlogPreview";
import { getAllPosts } from "../queries";
import { sanityClient } from "../sanity";
import { Post } from "../typings";

interface Props {
  posts: [Post];
}

// required for server-side rendering. returns 'props' object from db.
export const getServerSideProps = async () => {
  let query = getAllPosts;

  const posts = await sanityClient.fetch(query);

  return {
    props: {
      posts,
    },
  };
};

function blog({ posts }: Props) {
  return (
    <div>
      <div className='md:grid md:grid-cols-2'>
        {posts.map((post) => {
          return (
            <BlogPreview
              key={post._id}
              title={post.title}
              description={post.description}
              mainImage={post.mainImage}
              slug={post.slug}
            />
          );
        })}
      </div>
    </div>
  );
}

export default blog;

I've tried:

Logging sanity data to the console to check for config errors.
Googling the error: Module not found: Can't resolve '@sanity/image-url'

Conclusion

I'm unsure what the issue is, and how I can potentially solve it. Would love some ideas.

Thanks in advance

CodePudding user response：

It sounds like you don't have the @sanity/image-url module installed in your project.

Run this in your project directory and you should be good to go!

npm install --save @sanity/image-url