Skip to content

Conversation

@ammar-agent
Copy link
Collaborator

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:

$ PATH="/old-node:$PATH" make storybook
Error: Node.js v20 or higher is required
Current version: v18

Generated with cmux

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`_
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.
@ammario ammario enabled auto-merge October 28, 2025 23:30
@ammario ammario added this pull request to the merge queue Oct 28, 2025
Merged via the queue into main with commit 91f9923 Oct 28, 2025
12 of 13 checks passed
@ammario ammario deleted the fix-storybook-machine-issue branch October 28, 2025 23:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants