fix: edge runtime dynamic code eval (#1831)

packages/next-sanity/package.config.ts

@@ -15,6 +15,12 @@ const MODULE_PATHS_WHICH_USE_SERVER_DIRECTIVE_SHOULD_BE_ADDED = [
 
 export default defineConfig({
   tsconfig: 'tsconfig.build.json',
+  bundles: [
+    {
+      source: './src/index.edge-light.ts',
+      import: './dist/index.edge-light.js',
+    },
+  ],
   rollup: {
     output: {
       banner: (chunkInfo) => {

packages/next-sanity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-sanity",
-  "version": "9.8.2",
+  "version": "9.8.3-canary.1",
   "description": "Sanity.io toolkit for Next.js",
   "keywords": [
     "sanity",
@@ -27,6 +27,7 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
+      "edge-light": "./dist/index.edge-light.js",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"

packages/next-sanity/src/index.edge-light.ts

@@ -0,0 +1,16 @@
+/**
+ * Some of the exports on index.ts causes errors on the edge runtime, so we omit them here.
+ */
+
+import type {VisualEditingProps} from './visual-editing'
+
+export * from './client'
+export * from '@portabletext/react'
+export * from '@sanity/next-loader'
+export {defineQuery, default as groq} from 'groq'
+export type {VisualEditingProps} from 'next-sanity/visual-editing/client-component'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function VisualEditing(_props: VisualEditingProps): React.ReactNode {
+  throw new TypeError('VisualEditing is not supported on the edge runtime')
+}

packages/next-sanity/src/visual-editing/client-component/VisualEditingLazy.tsx

@@ -0,0 +1,21 @@
+/**
+ *
+ * If pages router supported `next/dynamic` imports (it wants `next/dynamic.js`),
+ * or if turbopack in app router allowed `next/dynamic.js` (it doesn't yet)
+ * we could use `dynamic(() => import('...), {ssr: false})` here.
+ * Since we can't, we need to use a lazy import and Suspense ourself.
+ */
+
+import {lazy, Suspense} from 'react'
+
+import type {VisualEditingProps} from './VisualEditing'
+
+const VisualEditingClientComponent = lazy(() => import('./VisualEditing'))
+
+export function VisualEditingLazyClientComponent(props: VisualEditingProps): React.ReactNode {
+  return (
+    <Suspense fallback={null}>
+      <VisualEditingClientComponent {...props} />
+    </Suspense>
+  )
+}

packages/next-sanity/src/visual-editing/client-component/index.ts

@@ -1,4 +1,4 @@
 'use client'
 
 export type {VisualEditingProps} from './VisualEditing'
-export {default} from './VisualEditing'
+export {VisualEditingLazyClientComponent as default} from './VisualEditingLazy'

packages/next-sanity/src/visual-editing/index.tsx

@@ -1,7 +1,5 @@
-import dynamic from 'next/dynamic'
 import type {VisualEditingProps} from 'next-sanity/visual-editing/client-component'
-
-const VisualEditingComponent = dynamic(() => import('next-sanity/visual-editing/client-component'))
+import VisualEditingComponent from 'next-sanity/visual-editing/client-component'
 
 /**
  * @public