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

Question

I keep getting 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);

Answer 1

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

Answer 2

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

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

Answer 3

All I did was run npm install @sanity/client @sanity/image-url, and then imported {createClient} and 'imageBuilderUrl' from the node-module directly. Here!

enter image description here