Merge pull request #1111 from objectstack-ai/copilot/fix-ci-build-and-test-errors-again

Author: hotlong

packages/components/src/lib/use-sync-external-store-shim.ts

@@ -0,0 +1,10 @@
+/**
+ * ESM re-export of useSyncExternalStore from React.
+ *
+ * React 18+ ships useSyncExternalStore natively. The CJS shim package
+ * (`use-sync-external-store/shim`) uses `require("react")` which
+ * produces a Rolldown `require` polyfill incompatible with Next.js
+ * Turbopack SSR. This module provides the same API surface using a
+ * static ESM import instead.
+ */
+export { useSyncExternalStore } from 'react';

packages/components/src/lib/use-sync-external-store-with-selector-shim.ts

@@ -0,0 +1,90 @@
+/**
+ * ESM re-export of useSyncExternalStoreWithSelector.
+ *
+ * The CJS shim package uses `require("react")` which produces a
+ * Rolldown `require` polyfill incompatible with Next.js Turbopack SSR.
+ * This module provides a pure-ESM implementation using React 18+
+ * native useSyncExternalStore.
+ */
+import { useRef, useEffect, useMemo, useDebugValue, useSyncExternalStore } from 'react';
+
+function is(x: unknown, y: unknown): boolean {
+  return (x === y && (0 !== x || 1 / (x as number) === 1 / (y as number))) || (x !== x && y !== y);
+}
+
+const objectIs: (x: unknown, y: unknown) => boolean =
+  typeof Object.is === 'function' ? Object.is : is;
+
+export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
+  subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => Snapshot,
+  getServerSnapshot: undefined | null | (() => Snapshot),
+  selector: (snapshot: Snapshot) => Selection,
+  isEqual?: (a: Selection, b: Selection) => boolean,
+): Selection {
+  const instRef = useRef<{
+    hasValue: boolean;
+    value: Selection;
+  } | null>(null);
+  let inst: { hasValue: boolean; value: Selection };
+  if (instRef.current === null) {
+    inst = { hasValue: false, value: null as Selection };
+    instRef.current = inst;
+  } else {
+    inst = instRef.current;
+  }
+
+  const [getSelection, getServerSelection] = useMemo(() => {
+    let hasMemo = false;
+    let memoizedSnapshot: Snapshot;
+    let memoizedSelection: Selection;
+    const memoizedSelector = (nextSnapshot: Snapshot): Selection => {
+      if (!hasMemo) {
+        hasMemo = true;
+        memoizedSnapshot = nextSnapshot;
+        const nextSelection = selector(nextSnapshot);
+        if (isEqual !== undefined) {
+          if (inst.hasValue) {
+            const currentSelection = inst.value;
+            if (isEqual(currentSelection, nextSelection)) {
+              memoizedSelection = currentSelection;
+              return currentSelection;
+            }
+          }
+        }
+        memoizedSelection = nextSelection;
+        return nextSelection;
+      }
+      const prevSnapshot = memoizedSnapshot;
+      const prevSelection = memoizedSelection;
+      if (objectIs(prevSnapshot, nextSnapshot)) {
+        return prevSelection;
+      }
+      const nextSelection = selector(nextSnapshot);
+      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+        memoizedSnapshot = nextSnapshot;
+        return prevSelection;
+      }
+      memoizedSnapshot = nextSnapshot;
+      memoizedSelection = nextSelection;
+      return nextSelection;
+    };
+    const maybeGetServerSelection =
+      getServerSnapshot === undefined || getServerSnapshot === null
+        ? undefined
+        : () => memoizedSelector(getServerSnapshot());
+    return [() => memoizedSelector(getSnapshot()), maybeGetServerSelection];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+
+  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+
+  useEffect(() => {
+    inst.hasValue = true;
+    inst.value = value;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useDebugValue(value);
+  return value;
+}

packages/components/vite.config.ts

@@ -20,16 +20,22 @@ export default defineConfig({
     }),
   ],
   resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-      '@object-ui/core': resolve(__dirname, '../core/src'),
-      '@object-ui/types': resolve(__dirname, '../types/src'),
-      '@object-ui/react': resolve(__dirname, '../react/src'),
-      '@object-ui/components': resolve(__dirname, './src'), // Self-reference for vitest.setup.tsx
-      '@object-ui/fields': resolve(__dirname, '../fields/src'),
-      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
-      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
-    },
+    alias: [
+      { find: '@', replacement: resolve(__dirname, './src') },
+      { find: '@object-ui/core', replacement: resolve(__dirname, '../core/src') },
+      { find: '@object-ui/types', replacement: resolve(__dirname, '../types/src') },
+      { find: '@object-ui/react', replacement: resolve(__dirname, '../react/src') },
+      { find: '@object-ui/components', replacement: resolve(__dirname, './src') }, // Self-reference for vitest.setup.tsx
+      { find: '@object-ui/fields', replacement: resolve(__dirname, '../fields/src') },
+      { find: '@object-ui/plugin-dashboard', replacement: resolve(__dirname, '../plugin-dashboard/src') },
+      { find: '@object-ui/plugin-grid', replacement: resolve(__dirname, '../plugin-grid/src') },
+      // The CJS shims use require("react") which produces a Rolldown
+      // require polyfill incompatible with Next.js Turbopack SSR.
+      // Alias to ESM modules that re-export from React 18+ directly.
+      { find: /^use-sync-external-store\/shim\/with-selector(\.js)?$/, replacement: resolve(__dirname, 'src/lib/use-sync-external-store-with-selector-shim.ts') },
+      { find: /^use-sync-external-store\/shim(\.js)?$/, replacement: resolve(__dirname, 'src/lib/use-sync-external-store-shim.ts') },
+      { find: /^use-sync-external-store\/with-selector(\.js)?$/, replacement: resolve(__dirname, 'src/lib/use-sync-external-store-with-selector-shim.ts') },
+    ],
   },
   build: {
     lib: {
@@ -38,7 +44,9 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@object-ui/core', '@object-ui/react', '@object-ui/types'],
+      // Use a function to match subpath imports (e.g. react/jsx-runtime)
+      // so Rolldown does not bundle CJS wrappers that use require().
+      external: (id) => /^(react|react-dom|@object-ui\/(core|react|types))(\/|$)/.test(id),
       output: {
         globals: {
           react: 'React',

packages/fields/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@object-ui/components": "workspace:*",
     "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",

packages/fields/src/widgets/LookupField.tsx

@@ -13,6 +13,7 @@ import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types'
 import { RecordPickerDialog } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
 import { getCellRendererResolver } from './_cell-renderer-bridge';
+import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
 
 export interface LookupOption {
   value: string | number;
@@ -25,21 +26,10 @@ export interface LookupOption {
 const LOOKUP_PAGE_SIZE = 50;
 
 /**
- * Resolve SchemaRendererContext from @object-ui/react at runtime.
- * Uses the same dynamic-require fallback that plugin-view uses to avoid
- * a hard dependency on @object-ui/react (which would create a cycle).
+ * SchemaRendererContext is created by @object-ui/react.
+ * Using a static import to be compatible with Next.js Turbopack SSR.
  */
-const FallbackContext = React.createContext<any>(null);
-let SchemaRendererContext: React.Context<any> = FallbackContext;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const mod = require('@object-ui/react');
-  if (mod.SchemaRendererContext) {
-    SchemaRendererContext = mod.SchemaRendererContext;
-  }
-} catch {
-  // @object-ui/react not available — dataSource must be passed via props
-}
+const SchemaRendererContext: React.Context<any> = ImportedSchemaRendererContext;
 
 /**
  * Map a raw record to a LookupOption using a display field and an id field.