[Bug]: getAbsolutePath workaround fails with Node 22.12.0

[Methuselah96]

Describe the bug

Starting with Node 22.12.0, Storybook fails to build when using the getAbsolutePath solution documented here. I suspect this is related to nodejs/node#55085.

Reproduction link

https://github.com/Methuselah96/storybook-node-22-latest

Reproduction steps

1. Run npm install
2. Run npm run build-storybook
3. Observe error:

@storybook/core v8.4.7

info => Cleaning outputDir: storybook-static
info => Loading presets
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: .\.storybook\main.ts.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: .\node_modules\@storybook\addon-webpack5-compiler-swc\preset.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

ReferenceError: module is not defined
    at file:///C:/Users/nbier/Documents/storybook-node-22-latest/node_modules/@storybook/addon-webpack5-compiler-swc/preset.js:1:1
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at node:internal/modules/cjs/loader:1677:16
    at Object.newLoader (.\node_modules\esbuild-register\dist\node.js:2262:9)
    at extensions..js (.\node_modules\esbuild-register\dist\node.js:4833:24)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)

More info:

    at loadPreset (.\node_modules\@storybook\core\dist\common\index.cjs:16477:13)

More info:

    at loadPreset (.\node_modules\@storybook\core\dist\common\index.cjs:16477:13)
    at async Promise.all (index 2)
    at async loadPresets (.\node_modules\@storybook\core\dist\common\index.cjs:16487:55)
    at async getPresets (.\node_modules\@storybook\core\dist\common\index.cjs:16520:11)
    at async buildStaticStandalone (.\node_modules\@storybook\core\dist\core-server\index.cjs:35384:11)
    at async withTelemetry (.\node_modules\@storybook\core\dist\core-server\index.cjs:35757:12)
    at async build (.\node_modules\@storybook\core\dist\cli\bin\index.cjs:2555:3)
    at async s.<anonymous> (.\node_modules\@storybook\core\dist\cli\bin\index.cjs:2661:7)
WARN   Failed to load preset: {"type":"presets","name":"C:\\Users\\nbier\\Documents\\storybook-node-22-latest\\node_modules\\@storybook\\addon-webpack5-compiler-swc\\preset.js"} on level 1
Error [ERR_REQUIRE_CYCLE_MODULE]: Cannot require() ES Module .\node_modules\@storybook\addon-webpack5-compiler-swc\preset.js in a cycle. (from .\node_modules\@storybook\core\dist\common\index.cjs)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:315:15)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at node:internal/modules/cjs/loader:1677:16
    at Object.newLoader (.\node_modules\esbuild-register\dist\node.js:2262:9)
    at extensions..js (.\node_modules\esbuild-register\dist\node.js:4833:24)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
Unhandled promise rejection: ReferenceError: module is not defined
    at file:///C:/Users/nbier/Documents/storybook-node-22-latest/node_modules/@storybook/addon-webpack5-compiler-swc/preset.js:1:1
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at node:internal/modules/cjs/loader:1677:16
    at Object.newLoader (C:\Users\nbier\Documents\storybook-node-22-latest\node_modules\esbuild-register\dist\node.js:2262:9)
    at extensions..js (C:\Users\nbier\Documents\storybook-node-22-latest\node_modules\esbuild-register\dist\node.js:4833:24)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13500
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD <----- active
    pnpm: 9.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (131.0.2903.70)
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7
    @storybook/addon-interactions: ^8.4.7 => 8.4.7
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7
    @storybook/addon-webpack5-compiler-swc: ^1.0.5 => 1.0.5
    @storybook/blocks: ^8.4.7 => 8.4.7
    @storybook/react: ^8.4.7 => 8.4.7
    @storybook/react-webpack5: ^8.4.7 => 8.4.7
    @storybook/test: ^8.4.7 => 8.4.7
    storybook: ^8.4.7 => 8.4.7

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is caused by Node 22.12.0's changes to ESM/CJS interop. The fix requires updating the getAbsolutePath workaround in @storybook/addon-webpack5-compiler-swc/preset.js to use ESM-compatible module resolution.

Temporary workaround:

1. Create a custom preset file that re-exports the SWC preset using ESM syntax:

// .storybook/swc-preset.mjs
export * from '@storybook/addon-webpack5-compiler-swc/preset.js';

2. Update .storybook/main.ts to use the custom preset:

export default {
  addons: [
    './swc-preset.mjs'
    // other addons...
  ]
};

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[Methuselah96]

The AI solution did not work. 😄 Although it got farther.

[Methuselah96]

Still fails: https://github.com/reduxjs/redux-devtools/actions/runs/12476856801/job/34941857310

It seems to be an issue with Node >=22.12.0 specifically, so maybe you're running it on different versions of Node?

[hcz]

Yep, still fails for node.js 22.12.0
Also, the configuration for bug reproduction could be simplified. The problem is possibly common for all addons in the monorepo

// .storybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";

import path from 'path';

const getAbsolutePath = (packageName: string): any =>
  path.dirname(require.resolve(path.join(packageName, 'package.json')));

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
    getAbsolutePath("@storybook/addon-essentials"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {},
  },
};
export default config;