[bug] Refactor Storybook main config for ESM compatibility.

[Han5991]

Description

start Storybook Error

This PR refactors the Storybook configuration to ensure compatibility with ECMAScript Modules (ESM). The changes include:

Changes Made

• Updated imports: Changed path to node:path to use Node.js built-in module prefix
• Added ESM compatibility: Introduced fileURLToPath and createRequire for proper ESM support
• Replaced CommonJS methods: Updated require.resolve() to use ESM-compatible nodeRequire.resolve()
• Enhanced path resolution: Added proper __filename and __dirname alternatives for ESM environment

Technical Details

• Added ESM-compatible directory resolution using import.meta.url
• Implemented CommonJS interoperability with createRequire
• Maintained backward compatibility with fallback handling
• Follows Node.js ESM best practices

Background

• Node.js 20-22: Storybook configuration worked correctly
• Node.js 24: ESM-related compatibility issues emerged
• This PR specifically addresses the Node.js 23+ compatibility problems

Testing

• ✅ Tested with Node.js 24 where the original issue was problematic
• ✅ Confirmed Storybook configuration now works correctly with Node.js 24+
• ✅ Maintains backward compatibility with Node.js 20-22

Related Issue

Fixes storybookjs/storybook#30115

This ensures Storybook configuration works correctly in modern JavaScript environments while maintaining compatibility with existing tooling.

[rtivital]

Thanks!

[rtivital]

Breaks storybook for me with Node.js 24. I will revert this PR.

{
  column: 32,
  file: '/Users/vitalyrtishchev/github/mantine/.storybook/main.ts',
  length: 11,
  line: 9,
  lineText: "const currentModuleUrl = typeof import.meta !== 'undefined' ? import.meta.url : '';",
Revert "[core] Fix Storybook compatibility with Node.js 24 (#8040)"
  namespace: '',
  suggestion: ''
}
"import.meta" is not available with the "cjs" output format and will be empty
SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Original error:
ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///.storybook/main.ts:1:46
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:498:37)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:437:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1523:24)
    at Module._compile (node:internal/modules/cjs/loader:1674:5)
    at Module._compile (/node_modules/esbuild-register/dist/node.js:2258:26)
    at node:internal/modules/cjs/loader:1824:10
    at Object.newLoader [as .ts] (/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1427:32)
    at Module._load (node:internal/modules/cjs/loader:1250:12)
    at loadMainConfig (./node_modules/@storybook/core/dist/common/index.cjs:17511:11)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37134:11)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

{
  column: 32,
  file: '/Users/vitalyrtishchev/github/mantine/.storybook/main.ts',
  length: 11,
  line: 9,
  lineText: "const currentModuleUrl = typeof import.meta !== 'undefined' ? import.meta.url : '';",
  namespace: '',
  suggestion: ''
}
"import.meta" is not available with the "cjs" output format and will be empty
{
  column: 32,
  file: '/Users/vitalyrtishchev/github/mantine/.storybook/main.ts',
  length: 11,
  line: 9,
  lineText: "const currentModuleUrl = typeof import.meta !== 'undefined' ? import.meta.url : '';",
  namespace: '',
  suggestion: ''
}
"import.meta" is not available with the "cjs" output format and will be empty

[Han5991]

@rtivital

Does reverting this PR fix the issue for you? Works fine on my Node.js 24 setup but seems environment-specific.

[rtivital]

Yes, reverting the PR fixed issue for me on macOS.

[Han5991]

Yes, reverting the PR fixed issue for me on macOS.

It works fine in 24.2.0, but I think there's an error in 24.3.0!

[rtivital]

I use 24.3.0

[Han5991]

I use 24.3.0

Thanks for fixing my code and project too