Implementing markdown editor in Sanity blog starter throwing error

It sounds like you're running into CSS import issues when trying to use the markdown plugin with the Sanity blog starter! This is a known issue with the plugin, especially when embedding Sanity Studio in Next.js applications.

The error you're seeing (Global CSS cannot be imported from within node_modules) is a documented issue that affects the plugin when used with Next.js. Here's what's happening and how to fix it:

The Problem

The sanity-plugin-markdown plugin tries to import CSS from within node_modules, which Next.js doesn't allow by default. This affects both older versions (with react-mde) and the current v3 version (which uses @uiw/react-md-editor).

Solutions

Option 1: Use the latest version (if you haven't already) Make sure you're using the latest version of the plugin:

npm install sanity-plugin-markdown@latest

The v3 version switched from react-mde to @uiw/react-md-editor, but some CSS import issues may still exist.

Option 2: Workaround for embedded Studio If you're embedding the Studio in Next.js (which seems likely given the blog starter context), one user found success by:

1. Copying the plugin code into your project (similar to how the Sanity blog template handles custom plugins)
2. Moving the CSS import to your _app.js or _app.tsx
3. Using dynamic imports for any components with browser-only dependencies:

const MarkdownEditor = dynamic(() => import('./your-markdown-component'), {
  ssr: false,
  loading: () => <div>Loading...</div>,
});

Option 3: Consider alternatives If the markdown plugin continues to give you trouble, you might want to consider:

• Using Sanity's built-in Portable Text with markdown shortcuts enabled
• Using a simple text field with markdown formatting handled on the frontend
• Waiting for the plugin maintainers to resolve the CSS bundling issues

Known Limitations

Be aware that the current v3 version of the plugin has also dropped drag-and-drop image upload support, so you'll need to manually add image URLs if you need images in your markdown.

If you share more details about your specific setup (Studio version, how you're embedding it, etc.), I can provide more targeted guidance!