未找到模块：无法解析 \'@sanity/client\'答案

【问题标题】：Module not found: Can't resolve '@sanity/client'未找到模块：无法解析 \'@sanity/client\'
【发布时间】：2022-09-23 10:22:01
【问题描述】：

我一直在本地主机上收到此错误

编译失败 ./lib/client.js:1:0 未找到模块：无法解析 \'@sanity/client\' > 1 |从 \'@sanity/client\' 导入 sanityClient； 2 |从 \'@sanity/image-url\' 导入 imageUrlBuilder； 3 | 4 |导出常量客户端 = sanityClient({

Import trace for requested module:
./pages/index.js

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

这是我的 ./pages/index.js

import React from \'react\'
import { client } from \'../lib/client\';
import {Product, FooterBanner, BriksBanner} from \'../comps\';

const Home = ({products, bannerData}) => (
    <div>
      <BriksBanner />
      {console.log(bannerData)}
      <div className=\"products-heading\">
        <h2> Lorem iosu dfkjk aret</h2>
        <p> Lorem iosu dfkjk aret </p>
      </div>

    <div className=\"products-container\">
        {products?.map((product) => product.name )
        }
    </div>

     <FooterBanner />
    </div>
    
);

export const getServerSideProps = async () => {
  const query = \'*[_type == \"product\"]\';
  const products = await client.fetch(query);

  const bannerQuery = \'*[_type == \"banner\"]\';
  const bannerData = await client.fetch(query);
  (bannerQuery);

  return {
    props: {products, bannerData}
  }
};

这也是一个带有健全客户端的文件：

import sanityClient from \'@sanity/client\';
import imageUrlBuilder from \'@sanity/image-url\';

export const client = sanityClient({
    projectId: \'jhlrtioz\',
    dataset: \'production\',
    apiVersion:\'2022-09-11\',
    useCdn: true,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

标签： javascript node.js reactjs sanity sanity-testing

【解决方案1】：

也许你删除了 @sanity/client 和 @sanity/image-url 或者忘记在你的前端安装它们。

//for npm
npm install @sanity/client @sanity/image-url
//for yarn
yarn add @sanity/client @sanity/image-url

【讨论】：

不幸的是..但没有。以这种方式检查了所有内容十亿次。
尝试将api版本更改为apiVersion：“2022-02-01”，您的api版本可能会中断连接

【解决方案2】：

您可能还错过了根据他们的文档和 projectId 可能发生的 API 版本错误，该错误还需要在您的 .env.local 中添加另一个 var，最后您是否安装了下一个 sanity 插件？也试试这个官方指南如何开始使用 nextjs npm next-sanity Connect your content to Next.js

//add this in .env.local file in your project frontend folder
NEXT_PUBLIC_SANITY_PROJECT_ID=Your Project ID Here

import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,// ADD YOUR PROJECT ID INTO .env file aswell
    dataset: 'production',
    apiVersion:'2022-02-01', // CHG API VERSION TO AVOID BREAKING
    useCdn: true,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.?image(source);

参考

Sanity Io - Docs - Api versioning

How to setup Sanity CMS with Next.js & TailwindCSS By Surjith S M connect-your-content-to-next-js - Sanity IO Docs

【讨论】：