Sanity V3 Embedding System don't load styles

[Rychillie]

When i use the new Sanity.io embedding system the page crashes and it is not possible to run the app because it cannot find the react-mde CSS

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/sanity-plugin-markdown/lib/index.modern.js

[gino]

Having the same issues here, using Next.js along with next-sanity.

[yeskunall]

This is still broken as of v3.0.0-v3-studio.1.

The latest version also drops support for drag-and-drop image uploads.

EDIT: @uiw/readt-markdown-editor also does not support writing MDX.

[ehowey]

Just hopping in here to also state that I just saw this error /w NextJS 13 and the latest version of the plugin (3.0.0-v3-studio.7). I have the studio setup inside of NextJS as a page route - identical to how it is done here: https://github.com/sanity-io/nextjs-blog-cms-sanity-v3

error - ./node_modules/@uiw/react-markdown-preview/esm/styles/markdown.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@uiw/react-markdown-preview/esm/index.js
error - Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/erichowey/coding/ehdev-v3/node_modules/react-markdown/index.js from /Users/erichowey/coding/ehdev-v3/node_modules/@uiw/react-markdown-preview/lib/index.js not supported.
Instead change the require of /Users/erichowey/coding/ehdev-v3/node_modules/react-markdown/index.js in /Users/erichowey/coding/ehdev-v3/node_modules/@uiw/react-markdown-preview/lib/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/erichowey/coding/ehdev-v3/node_modules/@uiw/react-markdown-preview/lib/index.js:13:45)
    at Object.<anonymous> (/Users/erichowey/coding/ehdev-v3/node_modules/@uiw/react-md-editor/lib/Editor.js:13:52)
    at Object.<anonymous> (/Users/erichowey/coding/ehdev-v3/node_modules/@uiw/react-md-editor/lib/index.js:12:39)
    at Object.<anonymous> (/Users/erichowey/coding/ehdev-v3/node_modules/sanity-plugin-markdown/lib/index.js:1:448)
    at Object.sanity-plugin-markdown (/Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:142:18)
    at __webpack_require__ (/Users/erichowey/coding/ehdev-v3/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./sanity.config.ts:13:80)
    at Object../sanity.config.ts (/Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:42:1)
    at __webpack_require__ (/Users/erichowey/coding/ehdev-v3/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/studio/[[...index]].tsx:9:72)
    at Function.__webpack_require__.a (/Users/erichowey/coding/ehdev-v3/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./pages/studio/[[...index]].tsx:1:21)
    at Object../pages/studio/[[...index]].tsx (/Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:32:1)
    at __webpack_require__ (/Users/erichowey/coding/ehdev-v3/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:172:39)
    at /Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:173:28
    at Object.<anonymous> (/Users/erichowey/coding/ehdev-v3/.next/server/pages/studio/[[...index]].js:176:3)
    at Object.requirePage (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/require.js:88:12)
    at /Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/load-components.js:37:73
    at runMicrotasks (<anonymous>)
    at async Object.loadComponents (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/load-components.js:37:26)
    at async DevServer.findPageComponents (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/next-server.js:550:36)
    at async DevServer.renderPageComponent (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/base-server.js:916:24)
    at async DevServer.renderToResponse (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/base-server.js:955:36)
    at async DevServer.pipe (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/base-server.js:404:25)
    at async Object.fn (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/next-server.js:746:21)
    at async Router.execute (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/router.js:252:36)
    at async DevServer.run (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/base-server.js:381:29)
    at async DevServer.run (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/dev/next-dev-server.js:732:20)
    at async DevServer.handleRequest (/Users/erichowey/coding/ehdev-v3/node_modules/next/dist/server/base-server.js:319:20) {
  code: 'ERR_REQUIRE_ESM',
  page: '/studio/[[...index]]'

[ehowey]

After doing some more digging this is somewhat of a known issue when combining the markdown editor and NextJS: https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[fabianlee1211]

I hacked around it by duplicating the plugin setup to my Next.js app. Similar to what the Sanity blog template did.

Then move the CSS import to your _app.js and remove the one in the plugin. If you run into any underlying libraries using any browser APIs like react-simplemde-editor which depends on codemirror uses navigator, simply turn the component to a dynamic client side import with Next.

const SimpleMdeReact = dynamic(() => import('react-simplemde-editor'), {
  ssr: false,
  loading: () => <Spinner />,
});