模块未找到:无法解析“@sanity/client”

Question

我一直在本地主机上得到这个错误

编译失败./lib/client.js:1:0模块未找到:无法解析'@sanity/ client‘>1\x从’@sanity/client‘>导入sanityClient；从’@sanity/image-url‘>导入imageUrlBuilder；从’@sanity/image-url‘>导入imageUrlBuilder；从’@sanity/image-url‘>导入imageUrlBuilder({

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

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

这是我的./page/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);

​

Answer 1

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

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

Answer 2

您可能也错过了API版本错误，这些错误可能会根据其文档和projectId而发生，这需要.env.local中的另一个变量，最后是否安装了下一个sanity插件？还可以尝试使用nextjs npm下一步-理智 将内容连接到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);

​

参考文献

健全的Io - Docs - Api版本控制

​

​

如何用Surjith S M与Next.js和TailwindCSS建立智能CMS 连接-您的内容-到下一个js-健全IO文档