Issue with client.fetch not being a function in Next.js and Sanity.io integration

I'm running some tests for a rather large company considering switching over to sanity. If someone has some time to answer my questions please drop in the replies. Tried a lot of different ways keep getting the same issues about client.fetch not being a function

}wait - compiling...
event - compiled client and server successfully in 1164 ms (1438 modules)
warn - Fast Refresh had to perform a full reload due to a runtime error.
wait - compiling...
event - compiled client and server successfully in 323 ms (1438 modules)
TypeError: _lib_sanity_client__WEBPACK_IMPORTED_MODULE_3__.client.fetch is not a function
at HomePage (webpack-internal:///(sc_server)/./app/(user)/page.tsx
:49:80) at preloadComponent (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:86:22) at C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:908:24 at processTicksAndRejections (node
:internal/process/task_queues:96:5) at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:907:25) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:847:56 at async Promise.all (index 0)
at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:812:38) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:847:56 at async Promise.all (index 0)
at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:812:38) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:1116:51TypeError: _lib_sanity_client__WEBPACK_IMPORTED_MODULE_3__.client.fetch is not a function
at HomePage (webpack-internal:///(sc_server)/./app/(user)/page.tsx
:49:80) at preloadComponent (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:86:22) at C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:908:24 at processTicksAndRejections (node
:internal/process/task_queues:96:5) at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:907:25) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:847:56 at async Promise.all (index 0)
at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:812:38) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:847:56 at async Promise.all (index 0)
at async createComponentTree (C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:812:38) at async C
:\Users\brian\OneDrive\Desktop\Fullstack\nextjs-sanity-blog-sonny\node_modules\next\dist\server\app-render.js:1116:51 { digest: '3673357512'
}

in lib
"use client";


import { createClient } from "/client";

export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;
export const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION;

export const client = createClient({ projectId, dataset, apiVersion });

alos used import { createClient } from "next-sanity"; nothing

import { Inter } from "@next/font/google";
import { previewData } from "next/headers";
import { groq } from "next-sanity";
import PreviewSuspense from "components/PreviewSuspense";
import { client } from "../../lib/sanity.client";
const query = groq`
*[_type=="post"]{
...,
author->,
categories[]->,
} | order(_createdAt desc)
`;


// const inter = Inter({ subsets: ["latin"] });

export default async function HomePage() {
if (previewData()) {
return ( <PreviewSuspense

fallback={ <div
role="status"> <p
className="text-center text-lg animate-pusle text-[#fff]"> Loading Preview Data
</p>
</div>
}
>
<div>1</div>
</PreviewSuspense>
);
}

const posts =
await client.fetch(query);

// console.warn(data);
return ( <div
className="bg-white h-screen text-black text-4xl"> {
/* Bloglists */} <h1
className="">{posts}</h1> </div>
);
}

pretty popular build on line everything up to this point has been no issue. Please offer some pointers if you have come across this issue before

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @sanity/vision@3.0.0
npm ERR! Found: @sanity/client@5.2.1
npm ERR! node_modules/@sanity/client
npm ERR! @sanity/client@"^5.2.1" from the root project
npm ERR! @sanity/client@"^5" from next-sanity@4.1.5
npm ERR! node_modules/next-sanity
npm ERR! next-sanity@"^4.1.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @sanity/client@"^3.4.1" from @sanity/vision@3.0.0
npm ERR! node_modules/@sanity/vision
npm ERR! @sanity/vision@"3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @sanity/client@3.4.1
npm ERR! node_modules/@sanity/client
npm ERR! peer @sanity/client@"^3.4.1" from @sanity/vision@3.0.0
npm ERR! node_modules/@sanity/vision
npm ERR! @sanity/vision@"3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\brian\AppData\Local\npm-cache\eresolve-report.txt for a full report.

... hmmm. Worked it out, kinda dumb issue.. Had to use the cache..