Sanity Studio crashes with scrollTop error when applying text styles (h1-h6)

3 replies
Last updated: Jun 13, 2024
Hi,
I've been evaluating Sanity and playing around with blog schema. Looks like that after applying styles to a text (think
h1-h6
tags etc) a document crushes in Sanity Studio. getting this error:

Error: Cannot read properties of null (reading 'scrollTop')
TypeError: Cannot read properties of null (reading 'scrollTop')
    at ibn (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2291>)
    at obn (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2473>)
    at <https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2582>
    at Array.map (<anonymous>)
    at abn (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2552>)
    at <https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2703>
    at Object.s8e [as useMemo] (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:57:21479>)
    at Yn.useMemo (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:9:6286>)
    at sbn (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:2431:2681>)
    at LK (<https://simpleimmi.sanity.studio/static/sanity-8845183b.js:57:17070>)
AI Update

This error typically occurs in Sanity Studio when working with Portable Text fields, particularly when applying block-level styles like headings (h1-h6). The Cannot read properties of null (reading 'scrollTop') error suggests the Portable Text editor is trying to access a DOM element that hasn't been properly rendered or has been unmounted.

Here are the most effective solutions to try:

1. Update Sanity Studio to the latest version

The most common fix is ensuring you're running a current version of Sanity Studio, as various scrolling and focus-related bugs in the Portable Text editor have been addressed over time:

npm install sanity@latest

After updating, restart your dev server with npm run dev or sanity dev.

2. Check your Portable Text schema configuration

Make sure your block content field is properly configured. A basic working configuration looks like this:

{
  name: 'content',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        {title: 'Normal', value: 'normal'},
        {title: 'H1', value: 'h1'},
        {title: 'H2', value: 'h2'},
        {title: 'H3', value: 'h3'},
        // ... other heading levels
      ]
    }
  ]
}

3. Clear browser cache and Studio data

Sometimes cached data can cause rendering issues:

  • Clear your browser cache completely
  • Delete your .sanity folder in your project directory
  • Restart the dev server

4. Check for conflicting custom plugins or configurations

If you're using custom Portable Text configurations, plugins, or custom components within your blocks, these could be interfering with the editor's scroll behavior. Try temporarily removing customizations to isolate the issue.

5. Temporary workarounds while troubleshooting

If you need to keep working while investigating:

  • Save your document frequently before applying styles
  • Refresh the Studio page after the error occurs
  • Try using keyboard shortcuts (Ctrl/Cmd + Alt + 1-6 for headings) instead of toolbar buttons

If the problem persists:

This could indicate a more specific issue with your setup. The Sanity community on Slack is very responsive and helpful for troubleshooting. When asking there, include:

  • Your Sanity Studio version (sanity --version)
  • Your complete schema definition for the affected field
  • Any custom plugins or components you're using
  • Browser and operating system details

The scrollTop error is usually resolved by keeping Studio updated, as the Portable Text editor receives regular improvements and bug fixes with each release.

Show original thread
3 replies
πŸ‘‹ Are you on the latest version?
Ha! Thanks, it helped! I installed the latest version yesterday morning but I hit 3.45.0. 3.46.1 works great.
Excellent!

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.

Was this answer helpful?