Fix production build: Copy React components to out-build/ directory

- Fix React build script to copy files to both out/ and out-build/ directories
- Production builds use out-build/, development uses out/
- Copy all files (not just .js) including chunks, CSS, source maps
- Integrate React build into production build process (compile-build tasks)
- Add error handling for React component imports to prevent blank screens

Author: Tajudeen

build/gulpfile.compile.js

@@ -11,6 +11,32 @@ const util = require('./lib/util');
 const date = require('./lib/date');
 const task = require('./lib/task');
 const compilation = require('./lib/compilation');
+const { execSync } = require('child_process');
+const path = require('path');
+
+/**
+ * Task to build React components for production
+ */
+const buildReactTask = task.define('build-react', () => {
+	return new Promise((resolve, reject) => {
+		try {
+			const reactBuildPath = path.join(__dirname, '../src/vs/workbench/contrib/cortexide/browser/react');
+			// allow-any-unicode-next-line
+			console.log('🔨 Building React components...');
+			execSync('node build.js', {
+				cwd: reactBuildPath,
+				stdio: 'inherit'
+			});
+			// allow-any-unicode-next-line
+			console.log('✅ React components built successfully');
+			resolve();
+		} catch (error) {
+			// allow-any-unicode-next-line
+			console.error('❌ Error building React components:', error);
+			reject(error);
+		}
+	});
+});
 
 /**
  * @param {boolean} disableMangle
@@ -20,6 +46,7 @@ function makeCompileBuildTask(disableMangle) {
 		util.rimraf('out-build'),
 		date.writeISODate('out-build'),
 		compilation.compileApiProposalNamesTask,
+		buildReactTask, // Build React components before compiling
 		compilation.compileTask('src', 'out-build', true, { disableMangle })
 	);
 }

src/vs/platform/native/electron-main/nativeHostMainService.ts

@@ -502,7 +502,7 @@ export class NativeHostMainService extends Disposable implements INativeHostMain
 	}
 
 	private async getShellCommandLink(): Promise<{ readonly source: string; readonly target: string }> {
-		const target = resolve(this.environmentMainService.appRoot, 'bin', 'code');
+		const target = resolve(this.environmentMainService.appRoot, 'bin', this.productService.applicationName);
 		const source = `/usr/local/bin/${this.productService.applicationName}`;
 
 		// Ensure source exists
@@ -771,7 +771,7 @@ export class NativeHostMainService extends Disposable implements INativeHostMain
 
 		// macOS
 		if (this.environmentMainService.isBuilt) {
-			return join(this.environmentMainService.appRoot, 'bin', 'code');
+			return join(this.environmentMainService.appRoot, 'bin', `${this.productService.applicationName}`);
 		}
 
 		return join(this.environmentMainService.appRoot, 'scripts', 'code-cli.sh');

src/vs/workbench/contrib/cortexide/browser/cortexideCommandBarService.ts

@@ -32,7 +32,13 @@ type VoidCommandBarModule = typeof import('./react/out/void-editor-widgets-tsx/i
 let mountVoidCommandBarPromise: Promise<VoidCommandBarModule['mountVoidCommandBar']> | undefined;
 function getMountVoidCommandBar() {
 	if (!mountVoidCommandBarPromise) {
-		mountVoidCommandBarPromise = import('./react/out/void-editor-widgets-tsx/index.js').then(m => m.mountVoidCommandBar);
+		mountVoidCommandBarPromise = import('./react/out/void-editor-widgets-tsx/index.js')
+			.then(m => m.mountVoidCommandBar)
+			.catch(error => {
+				console.error('[CortexideCommandBar] Failed to load React component:', error);
+				// Return a no-op function to prevent crashes
+				return () => { /* no-op */ };
+			});
 	}
 	return mountVoidCommandBarPromise;
 }

src/vs/workbench/contrib/cortexide/browser/react/build.js

@@ -27,16 +27,16 @@ function doesPathExist(filePath) {
 }
 
 /*
-
+ 
 This function finds `globalDesiredPath` given `localDesiredPath` and `currentPath`
-
+ 
 Diagram:
-
+ 
 ...basePath/
-└── void/
-	├── ...currentPath/ (defined globally)
-	└── ...localDesiredPath/ (defined locally)
-
+- void/
+  - ...currentPath/ (defined globally)
+  - ...localDesiredPath/ (defined locally)
+ 
 */
 function findDesiredPathFromLocalPath(localDesiredPath, currentPath) {
 
@@ -322,13 +322,16 @@ if (isWatch) {
 	// Check if src2/ exists; if not, do an initial scope-tailwind build
 	if (!fs.existsSync('src2')) {
 		try {
+			// allow-any-unicode-next-line
 			console.log('🔨 Running initial scope-tailwind build to create src2 folder...');
 			execSync(
 				'npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "void-"',
 				{ stdio: 'inherit' }
 			);
+			// allow-any-unicode-next-line
 			console.log('✅ src2/ created successfully.');
 		} catch (err) {
+			// allow-any-unicode-next-line
 			console.error('❌ Error running initial scope-tailwind build:', err);
 			process.exit(1);
 		}
@@ -378,9 +381,11 @@ if (isWatch) {
 		process.exit();
 	});
 
+	// allow-any-unicode-next-line
 	console.log('🔄 Watchers started! Press Ctrl+C to stop both watchers.');
 } else {
 	// Build mode
+	// allow-any-unicode-next-line
 	console.log('📦 Building...');
 
 	// Run scope-tailwind once
@@ -393,21 +398,21 @@ if (isWatch) {
 	console.log('🔧 Fixing import paths...');
 	fixImportPaths();
 
-	// Copy fixed files to out/ directory
+	// Copy fixed files to out/ and out-build/ directories
 	// IMPORTANT: fixImportPaths() must run BEFORE this copy step
 	// The files in src/vs/.../react/out/ have been fixed with absolute imports
-	// We need to copy those fixed files to out/vs/.../react/out/
-	console.log('📋 Copying files to out/ directory...');
+	// We need to copy those fixed files to both out/ and out-build/ directories
+	// Production builds use out-build/, while development uses out/
+	// allow-any-unicode-next-line
+	console.log('📋 Copying files to out/ and out-build/ directories...');
 	const srcOutDir = path.join(__dirname, 'out');
 	const outReactOutDir = path.join(__dirname, '../../../../../../../out/vs/workbench/contrib/cortexide/browser/react/out');
+	const outBuildReactOutDir = path.join(__dirname, '../../../../../../../out-build/vs/workbench/contrib/cortexide/browser/react/out');
 
 	if (!fs.existsSync(srcOutDir)) {
 		console.log('  Source out directory does not exist, skipping copy');
 	} else {
-		if (!fs.existsSync(outReactOutDir)) {
-			fs.mkdirSync(outReactOutDir, { recursive: true });
-		}
-
+		// Copy function that copies all files, not just .js files
 		function copyDir(src, dest) {
 			if (!fs.existsSync(dest)) {
 				fs.mkdirSync(dest, { recursive: true });
@@ -418,15 +423,30 @@ if (isWatch) {
 				const destPath = path.join(dest, entry.name);
 				if (entry.isDirectory()) {
 					copyDir(srcPath, destPath);
-				} else if (entry.isFile() && entry.name.endsWith('.js')) {
-					// Copy the fixed file (with absolute imports) to the out directory
+				} else if (entry.isFile()) {
+					// Copy all files (not just .js) - includes chunks, CSS, source maps, etc.
 					fs.copyFileSync(srcPath, destPath);
 				}
 			}
 		}
+
+		// Copy to out/ directory (for development)
+		if (!fs.existsSync(outReactOutDir)) {
+			fs.mkdirSync(outReactOutDir, { recursive: true });
+		}
 		copyDir(srcOutDir, outReactOutDir);
-		console.log('  Copied fixed files to out/ directory');
+		// allow-any-unicode-next-line
+		console.log('  ✓ Copied fixed files to out/ directory');
+
+		// Copy to out-build/ directory (for production builds)
+		if (!fs.existsSync(outBuildReactOutDir)) {
+			fs.mkdirSync(outBuildReactOutDir, { recursive: true });
+		}
+		copyDir(srcOutDir, outBuildReactOutDir);
+		// allow-any-unicode-next-line
+		console.log('  ✓ Copied fixed files to out-build/ directory');
 	}
 
+	// allow-any-unicode-next-line
 	console.log('✅ Build complete!');
 }