Cannot read properties of undefined (reading 'deskTool')

[IshanKBG]

I am unable to use sanity studio in my sveltekit project due the following the error

(Use `node --trace-warnings ...` to show where the warning was created)
Cannot read properties of undefined (reading 'deskTool')
TypeError: Cannot read properties of undefined (reading 'deskTool')
    at /home/ishan/repo/blog/src/lib/sanity/config.ts:3:11
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async instantiateModule (file:///home/ishan/repo/blog/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:52198:9)
17:57:09 [vite-plugin-svelte] ssr compile done.
package files    time      avg
migrate    10   0.50s   50.4ms

Here is my config file

import {deskTool} from "sanity/desk";
export default {
	plugins: [deskTool()],
	name: "blog",
	projectId: "yfzr8zfv", // Replace with your project ID
	dataset: "dev",
	schema: {
		types: [
			{
				type: "document",
				name: "post",
				title: "Post",
				fields: [
					{
						type: "string",
						name: "title",
						title: "Title",
					},
				],
			},
		],
	},
};

If I comment out the plugin property the studio loads just fine
I am unable to debug why it is happening
Here is my package.json in case if you ask for it

{
	"name": "migrate",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --plugin-search-dir . --check . && eslint .",
		"format": "prettier --plugin-search-dir . --write ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^1.0.0",
		"@sveltejs/adapter-cloudflare": "^1.0.0",
		"@sveltejs/kit": "^1.0.0",
		"@typescript-eslint/eslint-plugin": "^5.45.0",
		"@typescript-eslint/parser": "^5.45.0",
		"eslint": "^8.28.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"prettier": "^2.8.0",
		"prettier-plugin-svelte": "^2.8.1",
		"svelte": "^3.54.0",
		"svelte-check": "^2.9.2",
		"tslib": "^2.4.1",
		"typescript": "^4.9.3",
		"vite": "^4.0.0"
	},
	"type": "module",
	"dependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"sanity": "^3.1.1",
		"styled-components": "^5.3.6"
	}
}

Additional Context
Link to the repo

[mariuslundgard]

This is related to sanity not being supported in Node.js ESM mode (see #4013).

Can you try removing "type": "module" from your package.json and see if that works?

[IshanKBG]

This is related to sanity not being supported in Node.js ESM mode (see #4013).

Well is there any pre release package which supports esm?
Or any temporary solutions?

Can you try removing "type": "module" from your package.json and see if that works?
Well I cannot do it as then it will break the sveltekit app.

[IshanKBG]

Also here it says that esm is supported in the v3
https://www.sanity.io/docs/embedding-sanity-studio

[mariuslundgard]

Also here it says that esm is supported in the v3

You're right. We indeed support ESM in modern bundlers, as well as in browsers. But not yet in Node.js. This is something we are actively working to resolve.

I'm not experienced with SvelteKit myself, but would look into whether esbuild or esbuild-register can be configured as a workaround. Or whether there's a way to only render the Studio in the browser.

[mariuslundgard]

@IshanKBG Here's a workaround that looks promising: sveltejs/kit#928 (comment)

There's also a talk demoing how to configure SvelteKit and sanity: https://www.youtube.com/watch?v=xELXz553LCY

Will close this issue since it will be solved by #4013

[github-actions]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.