Error using createClient in Sanity and 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;
}

Mar 3, 2023, 11:18 PM

Greetings! Does the error also give you a line number?

Mar 3, 2023, 11:27 PM

user M

here's the stack trace

Mar 3, 2023, 11:28 PM

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 {

Mar 3, 2023, 11:28 PM

Thanks! Do you know what version of the

@sanity/client

package you’re using?

Mar 3, 2023, 11:29 PM

let me check

Mar 3, 2023, 11:29 PM

"@sanity/client": "^5.2.2", "@sanity/core": "^2.35.6",

Mar 3, 2023, 11:29 PM

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"
]
}

Mar 3, 2023, 11:30 PM

Can you check that you’re getting a response by console logging before you map over it?

Mar 3, 2023, 11:32 PM

yep

Mar 3, 2023, 11:32 PM

give me one min

Mar 3, 2023, 11:32 PM

I'm definitely not getting a response... it doesn't get that far

Mar 3, 2023, 11:35 PM

Got it, so the error happens as it’s being evaluated?

Mar 3, 2023, 11:37 PM

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

Mar 3, 2023, 11:38 PM

Nothing stands out to me as wrong with your code. Maybe try commenting it out, then reenabling line by line?

Mar 3, 2023, 11:46 PM

okay, I'll give it a shot

Mar 3, 2023, 11:46 PM

Does this make more sense? 44.chunk.js:22 Uncaught (in promise) ReferenceError: Cannot access 'createClient' before initialization

Mar 3, 2023, 11:51 PM

user M

Mar 3, 2023, 11:53 PM

Hmm, strange. You’re pretty clearly initializing the client before you make that call.

Mar 3, 2023, 11:54 PM

yeah, that's what I was thinking

Mar 3, 2023, 11:54 PM

I am sure it's something simple I'm doing wrong

Mar 3, 2023, 11:54 PM

I initially got the code from this page:
https://www.sanity.io/docs/js-client#get-client-configuration

Mar 3, 2023, 11:55 PM

in TypeScript section

Mar 3, 2023, 11:55 PM

I only have one real difference ... this is what's in the doc:

import {createClient, type ClientConfig} from '@sanity/client'

Mar 3, 2023, 11:56 PM

but when I use that, I get an error with the "type" reserved word

Mar 3, 2023, 11:56 PM

what version of Typescript should I be using?

Mar 3, 2023, 11:56 PM

I'm using "typescript": "^4.9.5",

Mar 3, 2023, 11:57 PM

Do you happen to be doing this inside of a V3 Studio?

Mar 3, 2023, 11:59 PM

no, it's a separate application and I'm just trying to pull information from sanity.io

Mar 3, 2023, 11:59 PM

Hi Lauren. Was this ever working for you in the past (i.e., on different versions)?

Mar 4, 2023, 12:00 AM

no... this is the first time I'm trying to do it

Mar 4, 2023, 12:00 AM

Would you mind trying v4 of

@sanity/client

Mar 4, 2023, 12:00 AM

sure... i didn't know there was one

Mar 4, 2023, 12:01 AM

how do I downgrade?

Mar 4, 2023, 12:01 AM

v5

@sanity/client

no longer supports ES5, and so I’m curious if that might be the issue when working with a Studio on v2.

Mar 4, 2023, 12:01 AM

in other words, what version do I need to target

Mar 4, 2023, 12:01 AM

is the studio part the @sanity/core?

Mar 4, 2023, 12:02 AM

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

Mar 4, 2023, 12:03 AM

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.

Mar 4, 2023, 12:04 AM

"@sanity/core": "^2.35.6",

Mar 4, 2023, 12:04 AM

what I'd really like to do is upgrade everything to the latest

Mar 4, 2023, 12:05 AM

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.

Mar 4, 2023, 12:06 AM

great!!

Mar 4, 2023, 12:06 AM

I didn't realize I wasn't on the latest

Mar 4, 2023, 12:07 AM

No problem!

Mar 4, 2023, 12:07 AM

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

Mar 6, 2023, 9:39 PM

Big kudos to

user A

for jumping in when I had to sign off!

Mar 6, 2023, 9:47 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Case studies

Popular guides

Error using createClient in Sanity and Typescript code

Sanity– build remarkable experiences at scale

Was this answer helpful?