Get help on Discord

TypeError: createClient is not a function in Sanity TypeScript code

46 replies
Last updated: Mar 6, 2023
Hello All... new to Sanity and Typescript so there is probably an obvious answer, but I'm getting this error: TypeError: Object(...) is not a function using this codeimport { createClient } from '
user E
/client'import type { ClientConfig } from '
user E
/client';
export async function *getIgnoredHandles*() {
const config:
ClientConfig = { projectId: 'project id',
dataset: 'production',
useCdn: false,
// set to 
true
to fetch from edge cache apiVersion: '2023-03-03',
// use current date (YYYY-MM-DD) to target the latest API version }

const client = *createClient*(config);
const response = await client.*fetch*('*[_type == "ignoredHandles"]');

const ignoredHandles: *IgnoredHandle*[] = response.*map*((handle: any) => ({
id: handle.id,
handle: handle.handle,
datereview: handle.datereview
}));

return ignoredHandles;

}

export interface
IgnoredHandle { id: string;
handle: string;
datereview: string;
}
AI Update

Based on the community discussion you've linked to, this error typically occurs due to a version compatibility issue between @sanity/client and your Sanity Studio version.

The Problem:

You're using @sanity/client v5.2.2 with @sanity/core v2.35.6 (which indicates you're on Sanity Studio v2). The issue is that @sanity/client v5+ no longer supports ES5, which can cause problems when working with a v2 Studio.

The Solution:

You have two options:

Option 1: Downgrade to @sanity/client v4 (Quick Fix)

  1. Delete your node_modules folder and lock file
  2. Edit your package.json and change the dependency to:
    "@sanity/client": "^4"
  3. Run npm install (or yarn)

Option 2: Upgrade to Sanity Studio v3 (Recommended)

This is the better long-term solution. Sanity Studio v3 is the current version and works seamlessly with @sanity/client v5+. You can follow the migration guide to upgrade your Studio.

Additional Notes:

  • Your import syntax is correct for v5+: import { createClient } from '@sanity/client'
  • If you get an error with import {createClient, type ClientConfig}, you can use separate imports instead:
    import { createClient } from '@sanity/client'
import type { ClientConfig } from '@sanity/client'
  • Update your apiVersion to a more recent date (like '2024-01-01' or the current date in YYYY-MM-DD format)

The community members who helped solve this were able to identify the version mismatch as the root cause, and upgrading to Studio v3 resolved the issue completely.

Show original thread
46 replies
Greetings! Does the error also give you a line number?
Hi
user M
here's the stack trace
defineHttpRequestsrc/http/request.ts:31

  28 | 
  29 | /** @internal */
  30 | export function defineHttpRequest(envMiddleware: Middlewares): HttpRequest {
> 31 |   const request = getIt([
  32 |     ...envMiddleware,
  33 |     printWarnings,
  34 |     jsonRequest(),

./node_modules/@sanity/client/dist/index.browser.js
src/index.browser.ts:14

  11 | export * from './types'
  12 | 
  13 | // Set the http client to use for requests, and its environment specific middleware
> 14 | const httpRequest = defineHttpRequest(envMiddleware)
  15 | /** @public */
  16 | export const requester = httpRequest.defaultRequester
  17 |

__webpack_require__
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^
  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

Module.<anonymous>
h
ttp3000/static/js/154.chunk.js72
./src/services/sanity.ts

http://localhost:3000/static/js/154.chunk.js:318:30

__webpack_require__
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^
  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {



__webpack_require__
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
fn
/Users/lhightower/projects/pipeline.ui/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^
  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
Thanks! Do you know what version of the 
@sanity/client
package you’re using?
let me check
"@sanity/client": "^5.2.2", "@sanity/core": "^2.35.6",
and my tsconfig.json:{
"compilerOptions": {
"types": [
"@sanity/client"
],
"target": "es2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Can you check that you’re getting a response by console logging before you map over it?
yep
give me one min
I'm definitely not getting a response... it doesn't get that far
Got it, so the error happens as it’s being evaluated?
Yes, if I understand what you're saying... the project compiles, and then when I go to the page that calls the function getIgnoredHandles, I get the error
Nothing stands out to me as wrong with your code. Maybe try commenting it out, then reenabling line by line?
okay, I'll give it a shot
Does this make more sense? 44.chunk.js:22 Uncaught (in promise) ReferenceError: Cannot access 'createClient' before initialization
user M
^^
Hmm, strange. You’re pretty clearly initializing the client before you make that call.
yeah, that's what I was thinking
I am sure it's something simple I'm doing wrong
in TypeScript section
I only have one real difference ... this is what's in the doc:
import {createClient, type ClientConfig} from '@sanity/client'

but when I use that, I get an error with the "type" reserved word
what version of Typescript should I be using?
I'm using "typescript": "^4.9.5",
Do you happen to be doing this inside of a V3 Studio?
no, it's a separate application and I'm just trying to pull information from sanity.io
Hi Lauren. Was this ever working for you in the past (i.e., on different versions)?
no... this is the first time I'm trying to do it
Would you mind trying v4 of 
@sanity/client
?
sure... i didn't know there was one
how do I downgrade?
v5
of 
@sanity/client
no longer supports ES5, and so I’m curious if that might be the issue when working with a Studio on v2.
in other words, what version do I need to target
is the studio part the @sanity/core?
You can delete your node_modules and lock file (presumably yarn.lock, on a v2 studio), then edit package.json and change the 
@sanity/client
dependency to something like: 
"@sanity/client": "^4",
. You would then run 
yarn
.
Yes, 
@sanity/core
is one of a few different “parts” that were central to a v2 studio. One of the big changes in v3 was going away from that parts system.
"@sanity/core": "^2.35.6",
what I'd really like to do is upgrade everything to the latest
That’s certainly the preferred approach, so that’s good to hear. There’s a migration guide as well as this community to help you along.
great!!
I didn't realize I wasn't on the latest
No problem!
user A
user M
just want to say thank you! I was on a plane last week trying to figure out what I'd done wrong and you guys answered my question so quickly! I'm up and running now and loving Sanity.io
Big kudos to
user A
for jumping in when I had to sign off!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?