From 1c90fc8ab146a1820e83503dfc3bad9eedb0bea8 Mon Sep 17 00:00:00 2001 From: Ammar Date: Tue, 28 Oct 2025 23:19:29 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A4=96=20fix:=20require=20Node.js=20v?= =?UTF-8?q?20+=20for=20Storybook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The issue was that Node.js v18.19.1 had a conflict with esbuild-register when loading Vite code in Storybook's config. Specifically, esbuild-register was trying to declare 'const __dirname' but it was already declared in the environment, causing a SyntaxError. Node.js v20.19.4 resolves this issue. Changes: - Add Node.js version check to Makefile (requires v20+) - Apply version check to all Storybook-related targets - Add --no-open flag to storybook dev to prevent xdg-open errors on headless machines - Provide helpful error message with instructions to upgrade using 'n' _Generated with `cmux`_ --- Makefile | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/Makefile b/Makefile index 3fbb97d423..be0303f851 100644 --- a/Makefile +++ b/Makefile @@ -46,6 +46,23 @@ include fmt.mk # Build tools TSGO := bun run node_modules/@typescript/native-preview/bin/tsgo.js +# Node.js version check +REQUIRED_NODE_VERSION := 20 +NODE_VERSION := $(shell node --version | sed 's/v\([0-9]*\).*/\1/') + +define check_node_version + @if [ "$(NODE_VERSION)" -lt "$(REQUIRED_NODE_VERSION)" ]; then \ + echo "Error: Node.js v$(REQUIRED_NODE_VERSION) or higher is required"; \ + echo "Current version: v$(NODE_VERSION)"; \ + echo ""; \ + echo "To upgrade Node.js:"; \ + echo " 1. Install 'n' version manager: curl -L https://raw.githubusercontent.com/tj/n/master/bin/n | sudo bash -s -- lts"; \ + echo " 2. Or use 'n' if already installed: sudo n $(REQUIRED_NODE_VERSION)"; \ + echo ""; \ + exit 1; \ + fi +endef + TS_SOURCES := $(shell find src -type f \( -name '*.ts' -o -name '*.tsx' \)) # Default target @@ -244,15 +261,19 @@ docs-watch: ## Watch and rebuild documentation ## Storybook storybook: node_modules/.installed ## Start Storybook development server - @bun x storybook dev -p 6006 + $(check_node_version) + @bun x storybook dev -p 6006 --no-open storybook-build: node_modules/.installed src/version.ts ## Build static Storybook + $(check_node_version) @bun x storybook build test-storybook: node_modules/.installed ## Run Storybook interaction tests (requires Storybook to be running or built) + $(check_node_version) @bun x test-storybook chromatic: node_modules/.installed ## Run Chromatic for visual regression testing + $(check_node_version) @bun x chromatic --exit-zero-on-changes ## Benchmarks From 7454d3057b389294a9178eca932b2cfb8b2284a2 Mon Sep 17 00:00:00 2001 From: Ammar Date: Tue, 28 Oct 2025 23:29:54 +0000 Subject: [PATCH 2/2] Auto-detect browser availability for Storybook Make the browser opening behavior smart: - Detect if xdg-open is available - Only add --no-open flag if it's not available - Allows Storybook to open browser on machines that support it - Prevents xdg-open ENOENT errors on headless machines This way it works seamlessly on both developer machines with browsers and headless CI/test machines. --- Makefile | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Makefile b/Makefile index be0303f851..d9d94def9b 100644 --- a/Makefile +++ b/Makefile @@ -63,6 +63,11 @@ define check_node_version fi endef +# Detect if browser opener is available that Storybook can use +# Storybook uses 'open' package which tries xdg-open on Linux, open on macOS, start on Windows +HAS_BROWSER_OPENER := $(shell command -v xdg-open >/dev/null 2>&1 && echo "yes" || echo "no") +STORYBOOK_OPEN_FLAG := $(if $(filter yes,$(HAS_BROWSER_OPENER)),,--no-open) + TS_SOURCES := $(shell find src -type f \( -name '*.ts' -o -name '*.tsx' \)) # Default target @@ -262,7 +267,7 @@ docs-watch: ## Watch and rebuild documentation ## Storybook storybook: node_modules/.installed ## Start Storybook development server $(check_node_version) - @bun x storybook dev -p 6006 --no-open + @bun x storybook dev -p 6006 $(STORYBOOK_OPEN_FLAG) storybook-build: node_modules/.installed src/version.ts ## Build static Storybook $(check_node_version)