Can't resolve 'react-dom/server' in Sanity studio schemas folder

I can help you with this "Module not found: Can't resolve 'react-dom/server'" error in your Sanity Studio schemas. This is a known issue that occurs because Sanity Studio's build process doesn't include server-side modules by default, even though you have react-dom installed.

Based on a troubleshooting thread from the Sanity community, here's the solution:

The Workaround

Instead of importing react-dom/server using the standard package import, use a relative path to your node_modules folder:

// Instead of this:
import ReactDOMServer from "react-dom/server";

// Use this:
import ReactDOMServer from '../../node_modules/react-dom/server'

You'll need to adjust the relative path (../../) based on where your schema file is located. For example:

• If your file is in studio/schemas/objects/, use ../../../node_modules/react-dom/server
• If it's in studio/schemas/, use ../../node_modules/react-dom/server

Why This Happens

Sanity Studio's webpack configuration doesn't automatically resolve server-side React modules like react-dom/server because the Studio runs in the browser. The build process excludes these server-specific modules to keep the bundle size down and avoid compatibility issues.

Alternative Consideration

Before implementing this workaround, consider whether you actually need server-side rendering in your Studio schema. The use case in the linked thread was trying to convert React icons to SVG strings for storage. Depending on your needs, you might want to:

1. Store just the icon name/identifier instead of the full SVG markup
2. Render the SVG on your frontend when displaying the content
3. Use a different approach that doesn't require renderToString() in the Studio

This keeps your Studio schemas simpler and avoids the module resolution issue entirely. But if you do need the server-side rendering capability, the relative path import should resolve your error.