sanity
sanity copied to clipboard
sanity-io
[v3] Embedded studio in nextjs does not offer an error stack on a broken schema
Describe the bug
The v3 dev preview of the studio when embedded as a component, for example, as a next.js route often fails to display errors and/or a proper stack of where things have gone wrong. This only happens on the embedded studio component and not when the studio is launched as a standalone.
To Reproduce
Steps to reproduce the behavior:
- Create a nextjs app
npx create-next-app@latest - Create a
[[...sanity]].jsroute for the studio - Add the component with a broken schema
- White screen OR generic "SchemaError" error.
As a reference here's the nextjs route function I am using:
import Head from 'next/head'
import { Studio } from 'sanity'
import { deskTool } from 'sanity/desk'
import { schemaTypes } from '../../schemas'
export default function Admin() {
return (
<>
<Head>
<title>Sanity Dashboard</title>
</Head>
<div className="h-screen m-0 overflow-hidden">
<Studio
config={{
name: 'Sanity Dashboard',
title: 'nextjs-sanity',
basePath: '/admin',
projectId: '...',
dataset: 'production',
plugins: [
deskTool(),
],
schema: {
types: schemaTypes,
},
}}
/>
</div>
</>
)
}
Expected behavior
Embedded studio should output the error with at least a trace or a clear explanation of what went wrong like it does when in standalone mode.
Screenshots
Standalone studio:
Embedded studio:
Which versions of Sanity are you using?
@sanity/cli (global) 3.0.0-dev-preview.8 (latest: 2.30.0)
@sanity/dashboard 3.0.0-v3-studio.0 (latest: 2.30.1)
@sanity/eslint-config-studio 2.0.0 (up to date)
sanity 3.0.0-dev-preview.8 (latest: 2.29.3)
What operating system are you using?
Linux phobos 5.15.0-37-generic #39-Ubuntu SMP Wed Jun 1 19:16:45 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
Distributor ID: Ubuntu
Description: Ubuntu 22.04 LTS
Release: 22.04
Codename: jammy
Which versions of Node.js / npm are you running?
Node v16.14.0 with Npm 8.3.1 and Yarn 1.22.4
Additional context
package.json below:
{
"name": "nextjs-sanity-v3",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"sanity:start": "sanity start",
"sanity:build": "sanity build"
},
"dependencies": {
"@sanity/client": "^3.3.2",
"@sanity/dashboard": "^3.0.0-v3-studio.0",
"@sanity/eslint-config-studio": "^2",
"next": "12.1.6",
"prettier": "^2.7",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-icons": "^3.11.0",
"sanity": "^3.0.0-dev-preview.8",
"sanity-plugin-graph-view": "^3.0.0-v3-studio.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.17.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.3"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}
So, just found out the WSOD can be circumvented by rendering the studio through the renderStudio function, however still retains the same issue about errors not fully being stacked/reported.
The route as reference:
import Head from 'next/head'
import { renderStudio } from 'sanity'
import createConfig from '../../sanity.config'
import { useEffect, useRef } from 'react'
export default function Admin() {
const studioRef = useRef()
useEffect(() => {
renderStudio(studioRef.current, createConfig)
})
return (
<>
<Head>
<title>Sanity Dashboard</title>
</Head>
<div ref={studioRef} className="h-screen m-0 overflow-hidden" />
</>
)
}
Had the same issue. I was manually rewriting my schemas to Typescript, and got "SchemaError" with no further information.
Figured out that a field referenced to a type that wasn't defined in the schema yet.
