@hubspot/cli 8.0.9-experimental.0 → 8.0.10-experimental.1

package/commands/cms/theme/preview.js

@@ -1,16 +1,14 @@
 import fs from 'fs';
 import path from 'path';
-import cliProgress from 'cli-progress';
 import { commands } from '../../../lang/en.js';
 import { getCwd } from '@hubspot/local-dev-lib/path';
-import { FILE_UPLOAD_RESULT_TYPES } from '@hubspot/local-dev-lib/constants/files';
 import { getThemeJSONPath } from '@hubspot/local-dev-lib/cms/themes';
-import { createDevServer } from '@hubspot/cms-dev-server';
-import { getUploadableFileList } from '../../../lib/upload.js';
+// Use subprocess approach to avoid React version conflicts
+// import { createDevServer } from '@hubspot/cms-dev-server';
+import { spawnDevServer } from '../../../lib/cms/devServerProcess.js';
 import { trackCommandUsage } from '../../../lib/usageTracking.js';
 import { previewPrompt, previewProjectPrompt, } from '../../../lib/prompts/previewPrompt.js';
 import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
-import { ApiErrorContext, logError } from '../../../lib/errorHandlers/index.js';
 import { getProjectConfig } from '../../../lib/projects/config.js';
 import { findProjectComponents } from '../../../lib/projects/structure.js';
 import { ComponentTypes } from '../../../types/Projects.js';
@@ -73,67 +71,16 @@ async function determineSrcAndDest(args) {
 async function handler(args) {
     const { derivedAccountId, noSsl, resetSession, port, generateFieldsTypes } = args;
     const { absoluteSrc, dest } = await determineSrcAndDest(args);
-    const filePaths = await getUploadableFileList(absoluteSrc, false);
-    function startProgressBar(numFiles) {
-        const initialUploadProgressBar = new cliProgress.SingleBar({
-            gracefulExit: true,
-            format: '[{bar}] {percentage}% | {value}/{total} | {label}',
-            hideCursor: true,
-        }, cliProgress.Presets.rect);
-        initialUploadProgressBar.start(numFiles, 0, {
-            label: commands.cms.subcommands.theme.subcommands.preview
-                .initialUploadProgressBar.start,
-        });
-        let uploadsHaveStarted = false;
-        const uploadOptions = {
-            onAttemptCallback: () => {
-                /* Intentionally blank */
-            },
-            onSuccessCallback: () => {
-                initialUploadProgressBar.increment();
-                if (!uploadsHaveStarted) {
-                    uploadsHaveStarted = true;
-                    initialUploadProgressBar.update(0, {
-                        label: commands.cms.subcommands.theme.subcommands.preview
-                            .initialUploadProgressBar.uploading,
-                    });
-                }
-            },
-            onFirstErrorCallback: () => {
-                /* Intentionally blank */
-            },
-            onRetryCallback: () => {
-                /* Intentionally blank */
-            },
-            onFinalErrorCallback: () => initialUploadProgressBar.increment(),
-            onFinishCallback: (results) => {
-                initialUploadProgressBar.update(numFiles, {
-                    label: commands.cms.subcommands.theme.subcommands.preview
-                        .initialUploadProgressBar.finish,
-                });
-                initialUploadProgressBar.stop();
-                results.forEach(result => {
-                    if (result.resultType == FILE_UPLOAD_RESULT_TYPES.FAILURE) {
-                        uiLogger.error(commands.cms.subcommands.theme.subcommands.preview.errors.uploadFailed(result.file, dest));
-                        logError(result.error, new ApiErrorContext({
-                            accountId: derivedAccountId,
-                            request: dest,
-                            payload: result.file,
-                        }));
-                    }
-                });
-            },
-        };
-        return uploadOptions;
-    }
     trackCommandUsage('preview', {}, derivedAccountId);
-    if (port) {
-        process.env['PORT'] = port.toString();
-    }
-    createDevServer(absoluteSrc, false, '', '', !noSsl, generateFieldsTypes, {
-        filePaths,
+    // Spawn dev server in isolated subprocess to avoid React version conflicts
+    // File listing and progress bars are handled within the subprocess
+    spawnDevServer({
+        absoluteSrc,
+        accountName: derivedAccountId?.toString(),
+        noSsl,
+        port,
+        generateFieldsTypes,
         resetSession: resetSession || false,
-        startProgressBar,
         dest,
     });
 }

package/lib/cms/devServerProcess.d.ts

@@ -0,0 +1,13 @@
+import { ChildProcess } from 'child_process';
+interface DevServerOptions {
+    absoluteSrc: string;
+    accountName?: string;
+    configPath?: string;
+    noSsl?: boolean;
+    port?: number;
+    generateFieldsTypes?: boolean;
+    resetSession?: boolean;
+    dest?: string;
+}
+export declare function spawnDevServer(options: DevServerOptions): ChildProcess;
+export {};

package/lib/cms/devServerProcess.js

@@ -0,0 +1,200 @@
+import { spawn, execSync } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { fileURLToPath } from 'url';
+import { getConfigFilePath } from '@hubspot/local-dev-lib/config';
+/**
+ * Ensures cms-dev-server is installed in an isolated cache directory.
+ * This prevents React version conflicts with the CLI.
+ */
+function ensureCmsDevServerCache(targetVersion) {
+    const cacheDir = path.join(os.homedir(), '.hubspot', 'cms-dev-server-cache');
+    const packageJsonPath = path.join(cacheDir, 'node_modules', '@hubspot', 'cms-dev-server', 'package.json');
+    // Check if already installed with correct version
+    let needsInstall = true;
+    if (fs.existsSync(packageJsonPath)) {
+        try {
+            const installedPackage = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+            if (installedPackage.version === targetVersion) {
+                needsInstall = false;
+            }
+        }
+        catch (e) {
+            // If we can't read the package.json, reinstall
+            needsInstall = true;
+        }
+    }
+    if (needsInstall) {
+        console.log(`Setting up isolated cms-dev-server ${targetVersion}...`);
+        // Create cache directory
+        fs.mkdirSync(cacheDir, { recursive: true });
+        // Clear old installation if exists
+        const nodeModulesDir = path.join(cacheDir, 'node_modules');
+        if (fs.existsSync(nodeModulesDir)) {
+            fs.rmSync(nodeModulesDir, { recursive: true, force: true });
+        }
+        // Install cms-dev-server with production dependencies only
+        try {
+            execSync(`npm install @hubspot/cms-dev-server@${targetVersion} --production --no-save --loglevel=error`, {
+                cwd: cacheDir,
+                stdio: 'ignore', // Suppress npm output
+            });
+            console.log('✓ cms-dev-server setup complete');
+        }
+        catch (e) {
+            console.error('Failed to install cms-dev-server:', e);
+            process.exit(1);
+        }
+    }
+    return cacheDir;
+}
+export function spawnDevServer(options) {
+    const { absoluteSrc, accountName, noSsl, port, generateFieldsTypes, resetSession, dest, } = options;
+    // Get the version from CLI's package.json
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const cliPackageJsonPath = path.join(__dirname, '../../package.json');
+    const cliPackageJson = JSON.parse(fs.readFileSync(cliPackageJsonPath, 'utf8'));
+    const targetVersion = cliPackageJson.dependencies['@hubspot/cms-dev-server'];
+    if (!targetVersion) {
+        console.error('Could not determine cms-dev-server version from package.json');
+        process.exit(1);
+    }
+    // Ensure cms-dev-server is installed in isolated cache
+    const cacheDir = ensureCmsDevServerCache(targetVersion);
+    // Build a Node script that imports and calls createDevServer
+    // This runs in the isolated cache directory, completely separate from CLI's node_modules
+    const script = `
+    // Suppress library deprecation warnings (e.g., body-parser)
+    process.noDeprecation = true;
+
+    const { createDevServer } = await import('@hubspot/cms-dev-server');
+    const { walk } = await import('@hubspot/local-dev-lib/fs');
+    const { createIgnoreFilter } = await import('@hubspot/local-dev-lib/ignoreRules');
+    const { isAllowedExtension } = await import('@hubspot/local-dev-lib/path');
+    const { FILE_UPLOAD_RESULT_TYPES } = await import('@hubspot/local-dev-lib/constants/files');
+    const cliProgress = (await import('cli-progress')).default;
+
+    ${dest
+        ? `
+    // Get uploadable files for preview
+    let filePaths = [];
+    try {
+      filePaths = await walk(${JSON.stringify(absoluteSrc)});
+    } catch (e) {
+      console.error('Error walking directory:', e);
+    }
+    filePaths = filePaths
+      .filter(file => isAllowedExtension(file))
+      .filter(createIgnoreFilter(false));
+
+    // Create progress bar for initial upload
+    function startProgressBar(numFiles) {
+      const initialUploadProgressBar = new cliProgress.SingleBar(
+        {
+          gracefulExit: true,
+          format: '[{bar}] {percentage}% | {value}/{total} | {label}',
+          hideCursor: true,
+        },
+        cliProgress.Presets.rect
+      );
+      initialUploadProgressBar.start(numFiles, 0, {
+        label: 'Preparing upload...',
+      });
+      let uploadsHaveStarted = false;
+      return {
+        onAttemptCallback: () => {},
+        onSuccessCallback: () => {
+          initialUploadProgressBar.increment();
+          if (!uploadsHaveStarted) {
+            uploadsHaveStarted = true;
+            initialUploadProgressBar.update(0, {
+              label: 'Uploading files...',
+            });
+          }
+        },
+        onFirstErrorCallback: () => {},
+        onRetryCallback: () => {},
+        onFinalErrorCallback: () => initialUploadProgressBar.increment(),
+        onFinishCallback: (results) => {
+          initialUploadProgressBar.update(numFiles, {
+            label: 'Upload complete',
+          });
+          initialUploadProgressBar.stop();
+          results.forEach(result => {
+            if (result.resultType == FILE_UPLOAD_RESULT_TYPES.FAILURE) {
+              console.error(\`Failed to upload \${result.file}\`);
+            }
+          });
+        },
+      };
+    }
+
+    const themePreviewOptions = {
+      filePaths,
+      startProgressBar,
+      resetSession: ${Boolean(resetSession)},
+      dest: ${JSON.stringify(dest)},
+    };
+    `
+        : 'const themePreviewOptions = undefined;'}
+
+    createDevServer(
+      ${JSON.stringify(absoluteSrc)},
+      false, // storybook
+      '', // config (uses env var HUBSPOT_CONFIG_PATH)
+      ${JSON.stringify(accountName || '')},
+      ${!noSsl}, // sslEnabled
+      ${Boolean(generateFieldsTypes)}, // fieldGenEnabled
+      themePreviewOptions
+    );
+  `;
+    // Set environment variables
+    const env = { ...process.env };
+    if (port) {
+        env.PORT = port.toString();
+    }
+    // Suppress Node.js deprecation warnings
+    env.NODE_NO_WARNINGS = '1';
+    // Set config path so cms-dev-server can find hubspot.config.yaml
+    // Use existing env var if set, otherwise get the default config path
+    if (!env.HUBSPOT_CONFIG_PATH) {
+        try {
+            env.HUBSPOT_CONFIG_PATH = getConfigFilePath();
+        }
+        catch (e) {
+            // Config file doesn't exist - cms-dev-server will handle this gracefully
+        }
+    }
+    console.log(env.HUBSPOT_CONFIG_PATH);
+    // Spawn Node with the inline script from the isolated cache directory
+    // This ensures complete isolation from CLI's React 19
+    const devServer = spawn('node', ['--input-type=module', '-e', script], {
+        stdio: 'inherit',
+        env,
+        cwd: cacheDir,
+    });
+    // Handle process events
+    devServer.on('error', error => {
+        console.error('Failed to start dev server:', error);
+        process.exit(1);
+    });
+    devServer.on('exit', (code, signal) => {
+        if (code !== 0 && code !== null) {
+            console.error(`Dev server exited with code ${code}`);
+            process.exit(code);
+        }
+        if (signal) {
+            console.error(`Dev server killed with signal ${signal}`);
+            process.exit(1);
+        }
+    });
+    // Handle CLI termination
+    process.on('SIGINT', () => {
+        devServer.kill('SIGINT');
+    });
+    process.on('SIGTERM', () => {
+        devServer.kill('SIGTERM');
+    });
+    return devServer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hubspot/cli",
-    "version": "8.0.9-experimental.0",
+    "version": "8.0.10-experimental.1",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
@@ -30,7 +30,6 @@
         "open": "7.4.2",
         "p-queue": "8.1.0",
         "react": "19.2.3",
-        "react-dom": "19.2.3",
         "strip-ansi": "7.1.0",
         "table": "6.9.0",
         "tmp": "0.2.4",
@@ -120,7 +119,6 @@
         "registry": "https://registry.npmjs.org/"
     },
     "resolutions": {
-        "eslint-visitor-keys": "4.2.0",
-        "@hubspot/cms-dev-server/react": "18.3.1"
+        "eslint-visitor-keys": "4.2.0"
     }
 }