microsoft-cognitiveservices-speech-sdk webpack compilation error in Sanity

This error occurs because the microsoft-cognitiveservices-speech-sdk package contains modern JavaScript syntax (like object spread operators) that Sanity Studio v2's webpack build system can't parse by default. The bent dependency in particular uses syntax that isn't being transpiled.

The Core Problem

Unfortunately, extending webpack configuration in Studio v2 was not officially documented or easily supported. The Parts System that powered Studio v2 was under-documented, and the build tooling was not designed to be easily customized. This makes it very difficult to add custom webpack loaders to handle problematic packages like this one.

Your Best Options

1. Migrate to Studio v3 (Strongly Recommended)

Since Studio v2 support ended on December 7, 2023 and is no longer receiving updates or security patches, you should seriously consider migrating to Studio v3.

Studio v3 uses Vite instead of webpack, has much better handling of modern JavaScript, and would likely work with this SDK out of the box without any custom configuration needed. The migration also brings:

• Better TypeScript support
• Improved performance
• A modern plugin API replacing the Parts System
• Continued support and updates

2. Move the Speech SDK Logic Outside the Studio

If you can't migrate immediately, consider moving the Microsoft Speech SDK integration to a separate service:

• Create a serverless function (Vercel, Netlify, AWS Lambda, or Sanity Functions) that handles the speech synthesis
• Call this function from your Studio custom action via a simple HTTP request
• This keeps the problematic dependency out of your Studio bundle entirely

Example approach:

// In your custom action
export default function MySpeechAction(props) {
  return {
    label: 'Generate Speech',
    onHandle: async () => {
      const response = await fetch('https://your-function-url.com/synthesize', {
        method: 'POST',
        body: JSON.stringify({ text: props.draft.text })
      });
      // Handle response
    }
  }
}

3. Try the Browser Bundle (May Not Work)

You could attempt importing the browser-specific bundle directly:

import * as sdk from 'microsoft-cognitiveservices-speech-sdk/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle';

However, this may still encounter compilation issues with Studio v2's build system.

Bottom Line

There's no reliable way to customize webpack in Studio v2 to fix this issue. Your most practical path forward is either migrating to Studio v3 (which solves this and gives you a supported platform) or moving the Speech SDK integration outside the Studio bundle entirely. Given that v2 is no longer supported, migration should be your priority.