SSR compilation error

[homerjam]

Describe the bug
Compilation error when using embeded Sanity with Sveltekit

To Reproduce
Setup Sanity embedded studio with Sveltekit, install sanity-plugin-media (tested v2 + v3)

Expected behavior
It should compile/run successfully

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/xxx/Projects/xxx/node_modules/.pnpm/sanity-plugin-media@3.0.1_@sanity+ui@2.14.3_@emotion+is-prop-valid@1.2.2_react-dom@18.3.1_rea_6njyf4dtdiwxre4me7krv655zy/node_modules/date-fns/format' is not supported resolving ES modules imported from /Users/xxx/xxx/node_modules/.pnpm/sanity-plugin-media@3.0.1_@sanity+ui@2.14.3_@emotion+is-prop-valid@1.2.2_react-dom@18.3.1_rea_6njyf4dtdiwxre4me7krv655zy/node_modules/sanity-plugin-media/dist/index.mjs
Did you mean to import "date-fns/format/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at o (file:///Users/jameshomer/Projects/venice-biennale-2025/node_modules/.pnpm/@tailwindcss+node@4.0.8/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:74)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
    at handleMessage (node:internal/modules/esm/worker:199:24)
    at checkForMessages (node:internal/modules/esm/worker:141:28)
    at process.<anonymous> (node:internal/modules/esm/worker:160:5) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/xxx/Projects/xxx/node_modules/.pnpm/sanity-plugin-media@3.0.1_@sanity+ui@2.14.3_@emotion+is-prop-valid@1.2.2_react-dom@18.3.1_rea_6njyf4dtdiwxre4me7krv655zy/node_modules/date-fns/format'
}

[kindred-erik]

Was able to work around this by dynamically importing the media plugin on the client. Added this in the <SanityStudio> component:

  const [studioConfig, setStudioConfig] = useState(baseConfig);

  // Only load the media plugin on the client side
  useEffect(() => {
    if (isClient) {
      // Dynamic import to avoid server-side issues
      import('sanity-plugin-media')
        .then(({ media }) => {
          setStudioConfig({
            ...baseConfig,
            plugins: [...baseConfig.plugins, media()],
          });
        })
        .catch((err) => {
          console.error('Failed to load media plugin:', err);
        });
    }
  }, []);

[N9des]

Same here, issue in 2.4.2 and downgrade in 2.3.2 to work again.