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

@@ -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',