Fix twenty sdk build (#17696)

- add twenty-ui in dist/vendor folder
- fix ts issue due to react version mismatch

packages/create-twenty-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-twenty-app",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Command-line interface to create Twenty application",
   "main": "dist/cli.cjs",
   "bin": "dist/cli.cjs",

packages/create-twenty-app/src/utils/__tests__/app-template.spec.ts

@@ -70,7 +70,7 @@ describe('copyBaseApplicationProject', () => {
     const packageJson = await fs.readJson(packageJsonPath);
     expect(packageJson.name).toBe('my-test-app');
     expect(packageJson.version).toBe('0.1.0');
-    expect(packageJson.dependencies['twenty-sdk']).toBe('0.4.0');
+    expect(packageJson.dependencies['twenty-sdk']).toBe('0.4.1');
     expect(packageJson.scripts['app:dev']).toBe('twenty app:dev');
   });
 

packages/create-twenty-app/src/utils/app-template.ts

@@ -282,7 +282,7 @@ const createPackageJson = async ({
       'lint:fix': 'eslint --fix',
     },
     dependencies: {
-      'twenty-sdk': '0.4.0',
+      'twenty-sdk': '0.4.1',
     },
     devDependencies: {
       typescript: '^5.9.3',

packages/twenty-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-sdk",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -62,7 +62,9 @@
     "inquirer": "^10.0.0",
     "jsonc-parser": "^3.2.0",
     "lodash.camelcase": "^4.3.0",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "twenty-shared": "workspace:*",
     "twenty-ui": "workspace:*",
     "typescript": "^5.9.2",
     "uuid": "^13.0.0",
@@ -77,7 +79,8 @@
     "@types/inquirer": "^9.0.0",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/node": "^24.0.0",
-    "@types/react": "^18",
+    "@types/react": "18.2.66",
+    "@types/react-dom": "18.2.22",
     "ts-morph": "^25.0.0",
     "tsx": "^4.7.0",
     "vite-plugin-dts": "^4.5.4",

packages/twenty-sdk/vite.config.ts

@@ -11,6 +11,8 @@ const moduleEntries = Object.keys((packageJson as any).exports || {})
 
 const entries = ['src/index.ts', 'src/cli/cli.ts', ...moduleEntries];
 
+const PACKAGES_TO_VENDOR = ['twenty-ui', 'twenty-shared'];
+
 const entryFileNames = (chunk: any, extension: 'cjs' | 'mjs') => {
   if (!chunk.isEntry) {
     throw new Error(
@@ -32,18 +34,18 @@ const entryFileNames = (chunk: any, extension: 'cjs' | 'mjs') => {
   return `${moduleDirectory}.${extension}`;
 };
 
-const copySharedDist = () => {
-  return {
-    name: 'copy-twenty-shared-dist',
+const copyTwentyPackagesInVendor = (packages: string[]) => {
+  return packages.map((packageName) => ({
+    name: `copy-${packageName}-dist`,
     closeBundle: async () => {
-      const sharedDist = path.resolve(__dirname, '../twenty-shared/dist');
-      const vendorDist = path.resolve(__dirname, 'dist/vendor/twenty-shared');
+      const sharedDist = path.resolve(__dirname, `../${packageName}/dist`);
+      const vendorDist = path.resolve(__dirname, `dist/vendor/${packageName}`);
 
       await fs.remove(vendorDist);
       await fs.ensureDir(path.dirname(vendorDist));
       await fs.copy(sharedDist, vendorDist);
     },
-  };
+  }));
 };
 
 export default defineConfig(() => {
@@ -61,7 +63,7 @@ export default defineConfig(() => {
       tsconfigPaths({
         root: __dirname,
       }),
-      copySharedDist(),
+      ...copyTwentyPackagesInVendor(PACKAGES_TO_VENDOR),
       dts({
         entryRoot: './src',
         tsconfigPath: tsConfigPath,
@@ -76,12 +78,18 @@ export default defineConfig(() => {
             .join(path.posix.sep);
           if (!rel.startsWith('.')) rel = `./${rel}`;
 
+          const formattedContent = PACKAGES_TO_VENDOR.reduce((acc, pkg) => {
+            const regex = new RegExp(
+              `(from\\s+["'])${pkg}(\\/[^"']*)?(["'])`,
+              'g',
+            );
+
+            return acc.replace(regex, `$1${rel}/${pkg}$2$3`);
+          }, content);
+
           return {
             filePath,
-            content: content.replace(
-              /(from\s+["'])twenty-shared(\/[^"']*)?(["'])/g,
-              `$1${rel}/twenty-shared$2$3`,
-            ),
+            content: formattedContent,
           };
         },
       }),

yarn.lock

@@ -24887,6 +24887,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:18.2.22":
+  version: 18.2.22
+  resolution: "@types/react-dom@npm:18.2.22"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/cd85b5f402126e44b8c7b573e74737389816abcc931b2b14d8f946ba81cce8637ea490419488fcae842efb1e2f69853bc30522e43fd8359e1007d4d14b8d8146
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^18.2.15":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
@@ -24923,7 +24932,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18, @types/react@npm:^18.0.0":
+"@types/react@npm:18.2.66":
+  version: 18.2.66
+  resolution: "@types/react@npm:18.2.66"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    "@types/scheduler": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/56e4b841f2daf03a0b3268d4f2bcf5841167fe56742b9f1c076fad66587fb59191bdaba4d5727dbfbcff750d5e8797fdd4e57d8d9704b0bfc6ad31ee1e268a70
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:^18.0.0":
   version: 18.3.27
   resolution: "@types/react@npm:18.3.27"
   dependencies:
@@ -24975,6 +24995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/scheduler@npm:*":
+  version: 0.26.0
+  resolution: "@types/scheduler@npm:0.26.0"
+  checksum: 10c0/84626b06551ab7e1247412a2588430da5cd75263a353f1fd70593ca7331d43797937b89fe587089c6b3613d0658986087c5f0b2debef5bae831cdc1104a432ef
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:7.5.8, @types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
@@ -51988,7 +52015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:18.3.1, react@npm:^18, react@npm:^18.0.0, react@npm:^18.2.0":
+"react@npm:18.3.1, react@npm:^18, react@npm:^18.2.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -57656,7 +57683,8 @@ __metadata:
     "@types/inquirer": "npm:^9.0.0"
     "@types/lodash.camelcase": "npm:^4.3.7"
     "@types/node": "npm:^24.0.0"
-    "@types/react": "npm:^18"
+    "@types/react": "npm:18.2.66"
+    "@types/react-dom": "npm:18.2.22"
     archiver: "npm:^7.0.1"
     axios: "npm:^1.6.0"
     chalk: "npm:^5.3.0"
@@ -57672,9 +57700,11 @@ __metadata:
     inquirer: "npm:^10.0.0"
     jsonc-parser: "npm:^3.2.0"
     lodash.camelcase: "npm:^4.3.0"
-    react: "npm:^18.0.0"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
     ts-morph: "npm:^25.0.0"
     tsx: "npm:^4.7.0"
+    twenty-shared: "workspace:*"
     twenty-ui: "workspace:*"
     typescript: "npm:^5.9.2"
     uuid: "npm:^13.0.0"