Module not found: Can't resolve '@sanity/client'

DiwSlow 0
Viewed 77

I've keep gotten this error on localhost

Failed to compile ./lib/client.js:1:0 Module not found: Can't resolve '@sanity/client' > 1 | import sanityClient from '@sanity/client'; 2 | import imageUrlBuilder from '@sanity/image-url'; 3 | 4 | export const client = sanityClient({

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

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

This is my ./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}
  }
};

And also this is a file with a sanity client:

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

sanity-testing sanity reactjs node.js javascript
2 Answers

Maybe you removed @sanity/client and @sanity/image-url or forgot to install them in your front End .

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

You may also missed the API Version errors that could happen in sanity according to their docs and the projectId aswell which needs another var in your .env.local and finally do you have the next sanity plugin installed ? also try this offical guide how to get started with 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);

References

Sanity Io - Docs - Api versioning

Sanity Io Note

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

AndGoEdu0
Related