✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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
Hi
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
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
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.
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.

Was this answer helpful?