Next.js项目访问/blog路由时出现@sanity/image-url模块未找到错误

我正在使用Next.js和Sanity搭建博客，访问/blog路由时，浏览器报错：

./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

项目文件夹结构 #

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

Sanity配置文件 #

我有一个Sanity配置文件，导出了一些辅助函数，其中imageUrlBuilder是错误来源，配置代码如下（参考Sanity官方文档编写）：

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);
};

这个辅助函数之前能正常工作，拉取并显示Sanity图片，但现在导致了路由问题，我不清楚原因。

博客页面组件 #

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;

已尝试的解决方法 #

• 将Sanity数据打印到控制台，检查配置错误。
• 搜索错误信息：Module not found: Can't resolve '@sanity/image-url'

求助需求 #

不确定问题所在，也不知道如何解决，希望得到一些解决思路。

1. 安装缺失的依赖包 #

错误提示明确找不到@sanity/image-url模块，说明该包未安装或被误删。在项目根目录执行对应安装命令：

# npm
npm install @sanity/image-url

# yarn
yarn add @sanity/image-url

# pnpm
pnpm add @sanity/image-url

2. 检查版本兼容性 #

若next-sanity版本较新，可能与旧版@sanity/image-url存在兼容问题。可安装最新匹配版本：

npm install @sanity/image-url@latest

3. 清理缓存并重启服务 #

缓存异常可能导致模块识别错误，执行以下操作后重启开发服务器：

# 清理npm缓存
npm cache clean --force

# 删除Next.js缓存目录
rm -rf .next

# 重启服务
npm run dev

4. 校验导入细节 #

确认sanity.js文件位置正确，导入语句的包名拼写无误（注意是@sanity/image-url，大小写和符号不能错）。

5. 检查依赖列表 #

打开项目根目录的package.json，确认dependencies中存在@sanity/image-url。若安装后仍未出现，重新执行安装命令并查看控制台是否有报错。

内容的提问来源于stack exchange，提问作者Josh