fix(build): inline dynamic imports in library outputs

Copilot · hotlong · commit 1dc6061d93ec · 2026-05-08T17:49:26.000+08:00
Library 'vite build --lib' outputs were emitting separate code-split chunks
(rolldown-runtime-*.js, LookupField-*.js, etc.) when source files used
React.lazy() / dynamic import(). When consumer apps re-bundled these
multi-file dists, the library's per-chunk rolldown-runtime collided with the
consumer's own runtime, causing 'TypeError: i is not a function' at runtime
when lazy components tried to register themselves (e.g. TextField in
@object-ui/fields after 4.0.4).

Adding output.inlineDynamicImports: true to all @object-ui/* library vite
configs forces a single dist/index.js per package, which lets consumer
bundlers handle the library as an opaque ESM module without identifier
mismatches across chunks.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/.changeset/inline-dynamic-imports.md b/.changeset/inline-dynamic-imports.md
@@ -0,0 +1,46 @@
+---
+"@object-ui/components": patch
+"@object-ui/fields": patch
+"@object-ui/layout": patch
+"@object-ui/plugin-aggrid": patch
+"@object-ui/plugin-ai": patch
+"@object-ui/plugin-calendar": patch
+"@object-ui/plugin-charts": patch
+"@object-ui/plugin-chatbot": patch
+"@object-ui/plugin-dashboard": patch
+"@object-ui/plugin-designer": patch
+"@object-ui/plugin-detail": patch
+"@object-ui/plugin-editor": patch
+"@object-ui/plugin-form": patch
+"@object-ui/plugin-gantt": patch
+"@object-ui/plugin-grid": patch
+"@object-ui/plugin-kanban": patch
+"@object-ui/plugin-list": patch
+"@object-ui/plugin-map": patch
+"@object-ui/plugin-markdown": patch
+"@object-ui/plugin-report": patch
+"@object-ui/plugin-timeline": patch
+"@object-ui/plugin-view": patch
+"@object-ui/plugin-workflow": patch
+---
+
+fix(build): inline dynamic imports in library outputs
+
+Library `vite build --lib` outputs were emitting separate code-split chunks
+(`rolldown-runtime-*.js`, `LookupField-*.js`, etc.) when source files used
+`React.lazy()` / dynamic `import()`. When consumer apps re-bundled these
+multi-file dists, the library's per-chunk rolldown-runtime collided with the
+consumer's own runtime, causing "TypeError: i is not a function" at runtime
+when lazy components tried to register themselves (e.g. TextField in
+`@object-ui/fields` after 4.0.4).
+
+Adding `output.inlineDynamicImports: true` to all `@object-ui/*` library vite
+configs forces a single `dist/index.js` per package, which lets consumer
+bundlers handle the library as an opaque ESM module without identifier
+mismatches across chunks.
+
+Affected packages: components, fields, layout, plugin-aggrid, plugin-ai,
+plugin-calendar, plugin-charts, plugin-chatbot, plugin-dashboard,
+plugin-designer, plugin-detail, plugin-editor, plugin-form, plugin-gantt,
+plugin-grid, plugin-kanban, plugin-list, plugin-map, plugin-markdown,
+plugin-report, plugin-timeline, plugin-view, plugin-workflow.
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
@@ -49,6 +49,7 @@ export default defineConfig({
       // so Rolldown does not bundle CJS wrappers that use require().
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/fields/vite.config.ts b/packages/fields/vite.config.ts
@@ -33,6 +33,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/layout/vite.config.ts b/packages/layout/vite.config.ts
@@ -20,6 +20,9 @@ export default defineConfig({
     },
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
+      output: {
+        inlineDynamicImports: true,
+      },
     },
   },
   test: {
diff --git a/packages/plugin-aggrid/vite.config.ts b/packages/plugin-aggrid/vite.config.ts
@@ -43,6 +43,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-ai/vite.config.ts b/packages/plugin-ai/vite.config.ts
@@ -33,6 +33,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-calendar/vite.config.ts b/packages/plugin-calendar/vite.config.ts
@@ -42,6 +42,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-charts/vite.config.ts b/packages/plugin-charts/vite.config.ts
@@ -43,6 +43,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-chatbot/vite.config.ts b/packages/plugin-chatbot/vite.config.ts
@@ -36,6 +36,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-dashboard/vite.config.ts b/packages/plugin-dashboard/vite.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
       // rolldown's runtime stub and throw at runtime.
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-designer/vite.config.ts b/packages/plugin-designer/vite.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-detail/vite.config.ts b/packages/plugin-detail/vite.config.ts
@@ -39,6 +39,7 @@ export default defineConfig({
       // private registries and breaks cross-plugin component lookup.
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-editor/vite.config.ts b/packages/plugin-editor/vite.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-form/vite.config.ts b/packages/plugin-form/vite.config.ts
@@ -33,6 +33,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-gantt/vite.config.ts b/packages/plugin-gantt/vite.config.ts
@@ -36,6 +36,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-grid/vite.config.ts b/packages/plugin-grid/vite.config.ts
@@ -33,6 +33,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-kanban/vite.config.ts b/packages/plugin-kanban/vite.config.ts
@@ -43,6 +43,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-list/vite.config.ts b/packages/plugin-list/vite.config.ts
@@ -39,6 +39,7 @@ export default defineConfig({
       // private registries and breaks cross-plugin component lookup.
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-map/vite.config.ts b/packages/plugin-map/vite.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-markdown/vite.config.ts b/packages/plugin-markdown/vite.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-report/vite.config.ts b/packages/plugin-report/vite.config.ts
@@ -36,6 +36,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-timeline/vite.config.ts b/packages/plugin-timeline/vite.config.ts
@@ -44,6 +44,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-view/vite.config.ts b/packages/plugin-view/vite.config.ts
@@ -25,6 +25,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/packages/plugin-workflow/vite.config.ts b/packages/plugin-workflow/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig({
     rollupOptions: {
       external: (id) => !/^[./]/.test(id) && !id.startsWith(__dirname),
       output: {
+        inlineDynamicImports: true,
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
