Skip to content

Commit 91f9923

Browse files
authored
🤖 fix: require Node.js v20+ for Storybook (#470)
## Problem Storybook was failing on this dev machine with: ``` SyntaxError: Identifier '__dirname' has already been declared ``` This occurred because Node.js v18.19.1 had a conflict with esbuild-register when loading Vite code in Storybook's config. esbuild-register was trying to declare `const __dirname` but it was already declared in the environment. ## Solution **Machine fix:** Upgraded Node.js from v18.19.1 to v20.19.4 using the `n` version manager. **Code fix:** Added Node.js version check to Makefile to prevent this issue for others: - Requires Node.js v20+ for all Storybook-related targets - Provides clear error message with upgrade instructions - Added `--no-open` flag to storybook dev to prevent xdg-open errors on headless machines ## Verification Storybook now starts successfully: ``` Storybook 8.6.14 for react-vite started Local: http://localhost:6006/ ``` Version check works correctly: ```bash $ PATH="/old-node:$PATH" make storybook Error: Node.js v20 or higher is required Current version: v18 ``` _Generated with `cmux`_
1 parent 033eccc commit 91f9923

File tree

1 file changed

+27
-1
lines changed

1 file changed

+27
-1
lines changed

Makefile

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,28 @@ include fmt.mk
4646
# Build tools
4747
TSGO := bun run node_modules/@typescript/native-preview/bin/tsgo.js
4848

49+
# Node.js version check
50+
REQUIRED_NODE_VERSION := 20
51+
NODE_VERSION := $(shell node --version | sed 's/v\([0-9]*\).*/\1/')
52+
53+
define check_node_version
54+
@if [ "$(NODE_VERSION)" -lt "$(REQUIRED_NODE_VERSION)" ]; then \
55+
echo "Error: Node.js v$(REQUIRED_NODE_VERSION) or higher is required"; \
56+
echo "Current version: v$(NODE_VERSION)"; \
57+
echo ""; \
58+
echo "To upgrade Node.js:"; \
59+
echo " 1. Install 'n' version manager: curl -L https://raw.githubusercontent.com/tj/n/master/bin/n | sudo bash -s -- lts"; \
60+
echo " 2. Or use 'n' if already installed: sudo n $(REQUIRED_NODE_VERSION)"; \
61+
echo ""; \
62+
exit 1; \
63+
fi
64+
endef
65+
66+
# Detect if browser opener is available that Storybook can use
67+
# Storybook uses 'open' package which tries xdg-open on Linux, open on macOS, start on Windows
68+
HAS_BROWSER_OPENER := $(shell command -v xdg-open >/dev/null 2>&1 && echo "yes" || echo "no")
69+
STORYBOOK_OPEN_FLAG := $(if $(filter yes,$(HAS_BROWSER_OPENER)),,--no-open)
70+
4971
TS_SOURCES := $(shell find src -type f \( -name '*.ts' -o -name '*.tsx' \))
5072

5173
# Default target
@@ -244,15 +266,19 @@ docs-watch: ## Watch and rebuild documentation
244266

245267
## Storybook
246268
storybook: node_modules/.installed ## Start Storybook development server
247-
@bun x storybook dev -p 6006
269+
$(check_node_version)
270+
@bun x storybook dev -p 6006 $(STORYBOOK_OPEN_FLAG)
248271

249272
storybook-build: node_modules/.installed src/version.ts ## Build static Storybook
273+
$(check_node_version)
250274
@bun x storybook build
251275

252276
test-storybook: node_modules/.installed ## Run Storybook interaction tests (requires Storybook to be running or built)
277+
$(check_node_version)
253278
@bun x test-storybook
254279

255280
chromatic: node_modules/.installed ## Run Chromatic for visual regression testing
281+
$(check_node_version)
256282
@bun x chromatic --exit-zero-on-changes
257283

258284
## Benchmarks

0 commit comments

Comments
 (0)