sanity document / schema validation fails

[dmorda]

Sanity introduced a new feature to their CLI that allows you to validate documents, schema, etc. However, it seems there may be an issue when trying to use it with this plugin.

$ sanity schema validate
⠙ Validating schema…
/Volumes/Development/Websites/studio.domain.com/node_modules/@uiw/react-color/src/index.tsx:1
export * from '@uiw/color-convert';
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.newLoader [as .tsx] (/Volumes/Development/Websites/studio.domain.com/node_modules/esbuild-register/dist/node.js:2262:9)
    at Object.<anonymous> (/Volumes/Development/Websites/studio.domain.com/node_modules/sanity-plugin-simpler-color-input/dist/index.js:13:13)```

I could totally be doing something wrong, but so far I've been unable to figure out how to get around this one.

[dangreaves]

The sanity graphql deploy command also fails with this same error.

The reason is because this package is importing @uiw/react-color/src/index, rather than @uiw/react-color. This causes Sanity to try and build from source, but since it's imported from a CJS file, it doesn't understand the ESM.

https://github.com/cositehq/sanity-plugin-simpler-color-input/blob/main/src/ColorInput.tsx#L24

Ideally this package would be importing @uiw/react-color which would avoid this problem, but looks like there is an open issue in @uiw/react-color preventing this (https://github.com/uiwjs/react-color/issues/104).

[tuomasorhanen]

@dangreaves did you come up with a solution to this issue?

[dangreaves]

@tuomasorhanen react-color need to fix their CommonJS build (https://github.com/uiwjs/react-color/pull/140), and then this package needs to use the proper export, not the source files.

Importing the source files works when building the Sanity UI because that uses Vite. However, the CLI tools (like sanity graphql deploy) do not use Vite, so are incapable of building the source files.

Until both packages are fixed, I needed to patch them. I have included the patches below if it helps you. You can apply these using something pnpm patch or patch-package.

react-color

diff --git a/cjs/index.js b/cjs/index.js
index 5560702b9ac1942f9eab55b1b44614dde0b8ce77..aba7687ea52cec4dc61739033f9e9204d8fcd94d 100644
--- a/cjs/index.js
+++ b/cjs/index.js
@@ -139,6 +139,7 @@ Object.keys(_colorConvert).forEach(function (key) {
   if (key in exports && exports[key] === _colorConvert[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _colorConvert[key];
     }
@@ -151,6 +152,7 @@ Object.keys(_reactColorAlpha).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorAlpha[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorAlpha[key];
     }
@@ -163,6 +165,7 @@ Object.keys(_reactColorCompact).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorCompact[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorCompact[key];
     }
@@ -175,6 +178,7 @@ Object.keys(_reactColorChrome).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorChrome[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorChrome[key];
     }
@@ -187,6 +191,7 @@ Object.keys(_reactColorColorful).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorColorful[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorColorful[key];
     }
@@ -199,6 +204,7 @@ Object.keys(_reactColorCircle).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorCircle[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorCircle[key];
     }
@@ -211,6 +217,7 @@ Object.keys(_reactColorBlock).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorBlock[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorBlock[key];
     }
@@ -223,6 +230,7 @@ Object.keys(_reactColorEditableInput).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorEditableInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorEditableInput[key];
     }
@@ -235,6 +243,7 @@ Object.keys(_reactColorEditableInputRgba).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorEditableInputRgba[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorEditableInputRgba[key];
     }
@@ -247,6 +256,7 @@ Object.keys(_reactColorEditableInputHsla).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorEditableInputHsla[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorEditableInputHsla[key];
     }
@@ -259,6 +269,7 @@ Object.keys(_reactColorHue).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorHue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorHue[key];
     }
@@ -271,6 +282,7 @@ Object.keys(_reactColorGithub).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorGithub[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorGithub[key];
     }
@@ -283,6 +295,7 @@ Object.keys(_reactColorMaterial).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorMaterial[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorMaterial[key];
     }
@@ -295,6 +308,7 @@ Object.keys(_reactColorSaturation).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorSaturation[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorSaturation[key];
     }
@@ -307,6 +321,7 @@ Object.keys(_reactColorShadeSlider).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorShadeSlider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorShadeSlider[key];
     }
@@ -319,6 +334,7 @@ Object.keys(_reactColorSketch).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorSketch[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorSketch[key];
     }
@@ -331,6 +347,7 @@ Object.keys(_reactColorSlider).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorSlider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorSlider[key];
     }
@@ -343,6 +360,7 @@ Object.keys(_reactColorSwatch).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorSwatch[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorSwatch[key];
     }
@@ -355,6 +373,7 @@ Object.keys(_reactColorWheel).forEach(function (key) {
   if (key in exports && exports[key] === _reactColorWheel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
+    configurable: true, /** @see https://github.com/uiwjs/react-color/issues/104#issuecomment-1947770890 */
     get: function get() {
       return _reactColorWheel[key];
     }

sanity-plugin-simpler-color-input

diff --git a/dist/index.esm.js b/dist/index.esm.js
index 04796cf250710d4fd54cf64ff271707bc68dee48..ecf29af8760110ed58631b043f45400f34390c1c 100644
--- a/dist/index.esm.js
+++ b/dist/index.esm.js
@@ -5,7 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon, CloseIcon, SearchIcon } from '@sanity/icons';
 import { Container, Popover, Flex, Button, Inline, Box, Card, Text, TextInput, Stack } from '@sanity/ui';
 import r, { useState, useCallback, useRef, useEffect, useContext, createElement } from 'react';
-import { rgbStringToHsva, hslStringToHsva, Chrome } from '@uiw/react-color/src/index';
+import { rgbStringToHsva, hslStringToHsva, Chrome } from '@uiw/react-color';
 import { BiFontColor, BiHighlight } from 'react-icons/bi';
 const SimplerColorInput = props => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
diff --git a/dist/index.js b/dist/index.js
index 580c64ed1e009ffc630b9cf7466ed7c778ae4994..8d306ba264f9562d27dd35d415405a171278e6f7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -10,7 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@sanity/icons');
 var ui = require('@sanity/ui');
 var r = require('react');
-var index = require('@uiw/react-color/src/index');
+var index = require('@uiw/react-color');
 var bi = require('react-icons/bi');
 function _interopDefaultCompat(e) {
   return e && typeof e === 'object' && 'default' in e ? e : {