title: Module not found: Can't resolve '@sanity/client'
body: <p>I've keep gotten this error on localhost</p>
  <p>Failed to compile
  ./lib/client.js:1:0
  Module not found: Can't resolve '@sanity/client'
  &gt; 1 | import sanityClient from '@sanity/client';
  2 | import imageUrlBuilder from '@sanity/image-url';
  3 |
  4 | export const client = sanityClient({</p>
  <pre><code>Import trace for requested module:
  ./pages/index.js
  
  https://nextjs.org/docs/messages/module-not-found
  </code></pre>
  <p>This is my ./pages/index.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { client } from '../lib/client';
  import {Product, FooterBanner, BriksBanner} from '../comps';
  
  const Home = ({products, bannerData}) =&gt; (
      &lt;div&gt;
        &lt;BriksBanner /&gt;
        {console.log(bannerData)}
        &lt;div className="products-heading"&gt;
          &lt;h2&gt; Lorem iosu dfkjk aret&lt;/h2&gt;
          &lt;p&gt; Lorem iosu dfkjk aret &lt;/p&gt;
        &lt;/div&gt;
  
      &lt;div className="products-container"&gt;
          {products?.map((product) =&gt; product.name )
          }
      &lt;/div&gt;
  
       &lt;FooterBanner /&gt;
      &lt;/div&gt;
      
  );
  
  export const getServerSideProps = async () =&gt; {
    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}
    }
  };</code></pre>
  </div>
  </div>
  </p>
  <p>And also this is a file with a sanity client:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; builder.image(source);</code></pre>
  </div>
  </div>
  </p>