Get help on Discord

Upgrading to v3 and splitting desk structure causes crashes in Sanity Studio

6 replies
Last updated: Dec 19, 2022
Hey Sanity Team, I just upgraded a test studio to v3.. I am trying to split my desk structure up into parts, but I am not sure if I am doing this correctly (not using typescript).. This is a similar layout to the Hydrogen Studio starter. This MIGHT be a bug with the studio, but currently if you split your desk structure up into parts, then change something within one of those parts the studio crashes. Here is what I have:`sanity.config.js`:

plugins: [
  deskTool({
    structure
  }),
]
Then my 
structure
which is just 
index.js
in my /Desk folder:
import { home } from './home'

// Doc types
const hiddenDocTypes = (listItem) => {
  const id = listItem.getId()

  if (!id) {
    return false
  }

  return ![
    'homePage',
    'media.tag' // Media plugin
  ].includes(id)
}

export const structure = (S) =>
  S.list()
    .title('Content')
    .items([
      home(S),

      // Filter out docs already defined above
      ...S.documentTypeListItems().filter(hiddenDocTypes)
    ])
And finally my 
home.js
structure schema:
// Icons
import { HouseLine } from 'phosphor-react'

export const home = (S) =>
  S.listItem()
    .title('Home')
    .icon(HouseLine)
    .child(
      S.editor()
      .title('Home Page')
      .schemaType('homePage')
      .documentId('homePage')
    )
Again, I am not sure if I am doing this correctly as there is really no other example of this other than the Shopify Hydrogen Studio.. If I make a change in the 
home.js
my studo will crash.
AI Update

Your code structure looks correct - you're following the same modular pattern used in the Hydrogen starter. However, the crash you're experiencing when editing home.js isn't documented as expected behavior, and this appears to be a potential bug worth investigating.

Your setup follows best practices:

Your approach of splitting structure files is valid according to the Structure Builder documentation. The pattern you're using - exporting functions that accept the Structure Builder (S) parameter and composing them together - is the correct way to organize structure code:

// desk/home.js
export const home = (S) =>
  S.listItem()
    .title('Home')
    .icon(HouseLine)
    .child(
      S.editor()
        .title('Home Page')
        .schemaType('homePage')
        .documentId('homePage')
    )

// desk/index.js
import { home } from './home'

export const structure = (S) =>
  S.list()
    .title('Content')
    .items([
      home(S),
      ...S.documentTypeListItems().filter(hiddenDocTypes)
    ])

This matches the recommended patterns from the Structure Builder guide.

Troubleshooting steps:

Since crashes on file changes aren't documented behavior, try these approaches:

  1. Check your Studio version - Make sure you're on the latest Studio v3 release. Run npm list sanity to check your version, and consider updating if you're not on the latest.

  2. Look for console errors - When the crash happens, check your browser console and terminal for specific error messages. These will be helpful when reporting the issue.

  3. Verify your imports - Ensure there are no circular dependencies between your structure files and that all imports resolve correctly.

  4. Test with minimal configuration - Temporarily simplify your home.js to rule out issues with the icon import or specific Structure Builder methods:

export const home = (S) =>
  S.listItem()
    .title('Home')
    .child(S.documentTypeList('homePage'))
  1. Try manual refresh - As a temporary workaround while developing, you might need to manually refresh the browser after saving structure file changes rather than relying on hot module reload.

Report this issue:

Since this behavior isn't documented and your code follows established patterns, I'd recommend reporting this:

Include details like your Studio version, Node version, and the exact error messages you're seeing. The Sanity team can then determine if this is a bug with hot module reloading when structure files are split across modules, or if there's a specific configuration issue causing the problem.

Your code organization is solid - the issue appears to be with how the development server handles these particular file updates, not with your structure implementation.

I think the problem is with your const home. Needs to return the listItem
export const home = (S) => {
  return S.listItem()
    .title('Home')
    .icon(HouseLine)
    .child(
      S.editor()
      .title('Home Page')
      .schemaType('homePage')
      .documentId('homePage')
    )
}
Hey
user S
! To clarify, does the code you posted work but breaks after adding anything more to your home function?
Hey
user M
the studio only breaks when I manually refresh the page or sometimes it happens on its own... I'm still not entirely sure of the culprit or if I am just doing something wrong with how much desk structure is made. Here is a screenshot of what happens upon a manual page refresh or sometimes randomly (without a manual refresh):
user C
I did try this beforehand, but my studio still crashes occasionally (no change from what happens initially).. Good suggestion though
user M
For some reason when I rewrote the 
home.js
as the following the studio did not crash (so this works):
export const home = (S) =>
  S.listItem({
    title: 'Home',
    id: 'homePage',
    icon: HouseLine,
    child: () =>
      S.document()
      .title('Home Page')
      .schemaType('homePage')
      .documentId('homePage')
    })
I am not sure why this is lol.. Any thoughts?
Hey
user M
just an update to this.. I found that I could use the regular schema and studio did not break if I added 
basePath: '/studio'
into my sanity config. Probably because I have my studio and web folders to split up my project

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?