Problem with @sanity/ui when compiling with Vite

[mathg]

Hi! I'm currently using Sanity embedded inside a Sveltekit App and it works great in local when building with vite dev mode. Although there seems to be a problem with sanity/ui and sanity/icons when building for prod.

In my app, I'm following what Chris Jayden said about Sanity Preview embedded inside Sveltekit shown here https://chrisjayden.com/articles/sveltekit-sanity-content-preview. I have a React component which uses sanity/ui to build the preview mode and it imports components like that

import {Card, Text} from '@sanity/ui'

As I said, it works fine in dev mode, but when Vite is running in built mode I get this message :

import { Card, Text } from "@sanity/ui";
         ^^^^
SyntaxError: Named export 'Card' not found. The requested module '@sanity/ui' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@sanity/ui';
const { Card, Text } = pkg;

but the solution shown here doesn't work as 'default' is not exported.

I'm also using sanity/icons for my Sanity documents and I get the same error for BookIcon.

import { LinkIcon, LeaveIcon, UserIcon, BookIcon, DocumentIcon, TiersIcon, CogIcon } from "@sanity/icons";
                                        ^^^^^^^^
SyntaxError: Named export 'BookIcon' not found. The requested module '@sanity/icons' is a CommonJS module, which may not support all module.exports as named exports.

Is there anything I can do to resolve this?

Thanks!

[avcohen]

I seem to have the same issue.

[felixyeboah]

have you been able to find a solution for this?

[avcohen]

Yep. It turns out the custom input component I was using needed to be refactored per v3 requirements. This was something I missed during the migration.

https://www.sanity.io/docs/migrating-custom-input-components

v2
{ name: 'title', title: 'Title', type: 'string', components: { input: MyStringInput, }, }

v3
{ name: 'title', title: 'Title', type: 'string', inputComponent: MyStringInput, }