Add runtime warning on supported Node versions

Author: codykaup

node-src/index.test.ts

@@ -904,3 +904,29 @@ describe('parsing package.json', () => {
     expect(result.code).toBeDefined();
   });
 });
+
+describe('Node version warning', () => {
+  it('logs a warning when the current Node version is unsupported', async () => {
+    vi.spyOn(process, 'versions', 'get').mockReturnValue({
+      ...process.versions,
+      node: '18.0.0',
+    });
+    const log = new TestLogger();
+
+    await run({ flags: { dryRun: true }, options: { log } });
+
+    expect(log.warnings.some((w) => w.includes('Unsupported Node.js version'))).toBe(true);
+  });
+
+  it('does not log a warning when the current Node version is supported', async () => {
+    vi.spyOn(process, 'versions', 'get').mockReturnValue({
+      ...process.versions,
+      node: '22.0.0',
+    });
+    const log = new TestLogger();
+
+    await run({ flags: { dryRun: true }, options: { log } });
+
+    expect(log.warnings.some((w) => w.includes('Unsupported Node.js version'))).toBe(false);
+  });
+});

node-src/index.ts

@@ -16,6 +16,7 @@ import {
   getUserEmail,
 } from './git/git';
 import checkForUpdates from './lib/checkForUpdates';
+import checkNodeVersion from './lib/checkNodeVersion';
 import checkPackageJson from './lib/checkPackageJson';
 import { isE2EBuild } from './lib/e2eUtils';
 import { emailHash } from './lib/emailHash';
@@ -115,6 +116,8 @@ export async function run({
     log = createLogger(config.flags, config.extraOptions),
   } = extraOptions || {};
 
+  checkNodeVersion(log, config.pkg.engines?.node);
+
   // We don't normalize because if the `version` field isn't a proper semver string, the process
   // silently exits.
   const packageInfo = await readPackageUp({ cwd: process.cwd(), normalize: false });

node-src/lib/checkNodeVersion.test.ts

@@ -0,0 +1,44 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import checkNodeVersion from './checkNodeVersion';
+import TestLogger from './testLogger';
+
+const stubNodeVersion = (version: string) => {
+  vi.spyOn(process, 'versions', 'get').mockReturnValue({
+    ...process.versions,
+    node: version,
+  });
+};
+
+describe('checkNodeVersion', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('logs a warning when the current Node version is below the supported range', () => {
+    stubNodeVersion('20.20.1');
+    const log = new TestLogger();
+
+    checkNodeVersion(log, '>=22.0.0');
+
+    expect(log.warnings.some((w) => w.includes('Unsupported Node.js version'))).toBe(true);
+  });
+
+  it('does not log when the current Node version satisfies the supported range', () => {
+    stubNodeVersion('22.10.0');
+    const log = new TestLogger();
+
+    checkNodeVersion(log, '>=22.0.0');
+
+    expect(log.warnings).toHaveLength(0);
+  });
+
+  it('does not log when no supported range is provided', () => {
+    stubNodeVersion('20.20.1');
+    const log = new TestLogger();
+
+    checkNodeVersion(log, undefined);
+
+    expect(log.warnings).toHaveLength(0);
+  });
+});

node-src/lib/checkNodeVersion.ts

@@ -0,0 +1,21 @@
+import { satisfies } from 'semver';
+
+import unsupportedNodeVersion from '../ui/messages/warnings/unsupportedNodeVersion';
+import { Logger } from './log';
+
+/**
+ * Warn the user if the current Node.js runtime does not satisfy the supported range declared in
+ * the CLI's `engines.node` field in `package.json`.
+ *
+ * @param log The logger to emit the warning to.
+ * @param supportedRange The semver range of Node.js versions Chromatic supports.
+ */
+export default function checkNodeVersion(log: Logger, supportedRange: string | undefined) {
+  if (!supportedRange) {
+    return;
+  }
+
+  if (!satisfies(process.versions.node, supportedRange)) {
+    log.warn(unsupportedNodeVersion(process.versions.node, supportedRange));
+  }
+}

node-src/types.ts

@@ -312,6 +312,7 @@ export interface Context {
     description: string;
     bugs: { url: string; email: string };
     docs: string;
+    engines?: { node?: string };
   };
   sessionId: string;
   packageJson: Record<string, any>;

node-src/ui/messages/warnings/unsupportedNodeVersion.stories.ts

@@ -0,0 +1,7 @@
+import unsupportedNodeVersion from './unsupportedNodeVersion';
+
+export default {
+  title: 'CLI/Messages/Warnings',
+};
+
+export const UnsupportedNodeVersion = () => unsupportedNodeVersion('20.20.1', '>=22.0.0');

node-src/ui/messages/warnings/unsupportedNodeVersion.ts

@@ -0,0 +1,13 @@
+import chalk from 'chalk';
+import { dedent } from 'ts-dedent';
+
+import { warning } from '../../components/icons';
+import link from '../../components/link';
+
+export default (currentVersion: string, supportedRange: string) =>
+  dedent(chalk`
+    ${warning} {bold Unsupported Node.js version}
+    You are running Node.js {bold v${currentVersion}}, but Chromatic supports {bold ${supportedRange}}.
+    Chromatic may not work as expected. Please upgrade Node.js to a supported version based on Node's release schedule:
+    ${link('https://github.com/nodejs/release#release-schedule')}
+  `);