From a9634b027ec8692274f546e7dfeb0e3418375dcb Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Tue, 19 May 2026 11:26:41 +0200
Subject: [PATCH] Stop bundling twenty-ui react cjs runtime code (#20703)

For this front component using Avatar from `twenty-sdk/ui`

```typescript
import { defineFrontComponent } from 'twenty-sdk/define';
import { Avatar } from 'twenty-sdk/ui';

// React component - implement your UI here
const Component = () => {
  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <Avatar avatarUrl={null} placeholder={'test'} />
      <h1>My new component!</h1>
      <p>This is your front component: fc-test</p>
    </div>
  );
};

export default defineFrontComponent({ ... });
```

## Before
<img width="3024" height="1964" alt="image"
src="https://github.com/user-attachments/assets/64479d9a-2316-4782-9552-c3982d85f97c"
/>

## After

<img width="1150" height="567" alt="image"
src="https://github.com/user-attachments/assets/67f34da2-a546-40e3-9f5d-62a5de6e4146"
/>
---
 packages/twenty-ui/vite.config.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index 0eafce38af..e1608b6e90 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -58,6 +58,10 @@ export default defineConfig(({ command }) => {
 
   const BUNDLED_DEPS = ['@tabler/icons-react'];
 
+  const externalDeps = Object.keys(packageJson.dependencies || {}).filter(
+    (dep) => !BUNDLED_DEPS.includes(dep),
+  );
+
   return {
     resolve: {
       alias: {
@@ -125,9 +129,8 @@ export default defineConfig(({ command }) => {
         name: 'twenty-ui',
       },
       rollupOptions: {
-        external: Object.keys(packageJson.dependencies || {}).filter(
-          (dep) => !BUNDLED_DEPS.includes(dep),
-        ),
+        external: (id: string) =>
+          externalDeps.some((dep) => id === dep || id.startsWith(dep + '/')),
         output: [
           {
             assetFileNames: 'style.css',