feat(storybook): Node 24 and ESM compatibility

[Tobbe]

Getting rid of require() usage to prep for Node 24 and ESM

Was specifically seeing this error when running Storybook

[WebServer] SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: storybook-framework-cedarjs/preset.
[WebServer] 
[WebServer] Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
[WebServer] 
[WebServer] If you believe this is a bug, please open an issue on Github.
[WebServer] 
[WebServer] ReferenceError: require is not defined
[WebServer]     at getAbsolutePath (file://./node_modules/storybook-framework-cedarjs/dist/preset.js:9:49)
[WebServer]     at file://./node_modules/storybook-framework-cedarjs/dist/preset.js:11:12
[WebServer]     at ModuleJobSync.runSync (node:internal/modules/esm/module_job:514:37)
[WebServer]     at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:449:47)
[WebServer]     at loadESMFromCJS (node:internal/modules/cjs/loader:1577:24)
[WebServer]     at Module._compile (node:internal/modules/cjs/loader:1742:5)
[WebServer]     at node:internal/modules/cjs/loader:1893:10
[WebServer]     at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
[WebServer]     at extensions..js (./node_modules/esbuild-register/dist/node.js:4833:24)
[WebServer]     at Module.load (node:internal/modules/cjs/loader:1480:32)
[WebServer]     at loadPreset (./node_modules/@storybook/core-common/dist/index.js:15:82)
[WebServer] 
[WebServer] WARN[WebServer]  Broken build, fix the error above.

[netlify]

✅ Deploy Preview for cedarjs canceled.

Name	Link
🔨 Latest commit	af45d73
🔍 Latest deploy log	https://app.netlify.com/projects/cedarjs/deploys/69032d2e6fba2f0008e3d083

[greptile-apps]

Greptile Overview

Greptile Summary

Replaces direct require() calls with ESM-compatible createRequire() to fix Node 24 compatibility issues in Storybook preset.

Key Changes:

• Imports createRequire from node:module
• Refactors getAbsolutePath() to use createRequire(import.meta.url) with paths option for package resolution
• Updates previewAnnotations to use createRequire for resolving ./preview.js
• Fixes the critical error: "ReferenceError: require is not defined"

Impact:
This change enables the Storybook framework to work correctly in ESM environments and with Node 24, where require() is not available in ES modules. The implementation follows established patterns used throughout the codebase (e.g., packages/core/src/bins/cedar.ts).

Confidence Score: 5/5

• This PR is safe to merge - it properly implements ESM compatibility using established patterns
• The changes correctly replace require() with createRequire() following Node.js ESM best practices and patterns already used in the codebase. The fix directly addresses the reported error and maintains backward compatibility. No logical errors or edge cases identified.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/storybook/src/preset.ts	5/5	Replaced require() with createRequire for ESM/Node 24 compatibility - correct ESM migration pattern

Sequence Diagram

sequenceDiagram
    participant SB as Storybook
    participant Preset as preset.ts
    participant CR as createRequire
    participant FS as File System
    participant Paths as getPaths()

    SB->>Preset: Load preset configuration
    Preset->>CR: createRequire(import.meta.url)
    Note over CR: Creates require function<br/>for ESM context
    
    Preset->>Preset: getAbsolutePath('@storybook/builder-vite')
    Preset->>CR: createdRequire.resolve('...')
    Preset->>Paths: getPaths().base
    Paths-->>Preset: base directory path
    CR->>FS: Resolve package.json with paths option
    FS-->>CR: Resolved path
    CR-->>Preset: Package path
    Preset-->>SB: Builder path
    
    Preset->>Preset: getAbsolutePath('@storybook/react')
    Preset->>CR: createdRequire.resolve('...')
    CR->>FS: Resolve package.json
    FS-->>CR: Resolved path
    CR-->>Preset: Package path
    Preset-->>SB: Renderer path
    
    Preset->>Preset: previewAnnotations()
    Preset->>CR: createRequire(import.meta.url)
    Preset->>CR: createdRequire.resolve('./preview.js')
    CR->>FS: Resolve preview file
    FS-->>CR: Resolved path
    CR-->>Preset: Preview path
    Preset-->>SB: Preview annotations
    
    Note over SB,Preset: ESM-compatible resolution<br/>works with Node 24

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}