Fix loading with Node.js v22.12.0

[osmestad]

Hey!

As this package defines "type": "module" the contents of /preset.js is assumed to be a ESM module, but it contains CJS code. Switching the file type seems to resolve this.

Issue first reported here: nodejs/node#56127

This revert the commit: 7d3379b I'm not sure what the reasoning was for changing it back then? But with the latest Node release I think this is the way to go. Our build worked fine up to and including the previous Node version: 22.11.0 but is broken now.

[MehediH]

@valentinpalkovic would be awesome if we can get this fix released. we are running into the same issue in our project with node 22.12.0, thank you!

[valentinpalkovic]

Hi @osmestad

Thank you for putting together this PR. I'll take a look.

[valentinpalkovic]

Hi @osmestad

Can you please try out the following canary release:
3.0.4--canary.11.642a6d9.0

In #11 I've changed the package being CJS. I am not sure, whether your PR will break usage of the addon in pre Node.js v22 versions in some scenarios.

[osmestad]

Hey @valentinpalkovic, thanks for looking into this!

Unfortunately it seems to still fail with our setup, output with the canary release is:

yarn build-storybook
@storybook/core v8.4.6

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-babel/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.

Error: Cannot find module './dist/preset.cjs'
Require stack:
- ./node_modules/@storybook/addon-webpack5-compiler-babel/preset.js
- ./node_modules/@storybook/core/dist/common/index.cjs
- ./node_modules/storybook/dist/proxy.cjs
- ./node_modules/storybook/bin/index.cjs
    at Function.<anonymous> (node:internal/modules/cjs/loader:1249:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
    at Function._load (node:internal/modules/cjs/loader:1075:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at Object.<anonymous> (./node_modules/@storybook/addon-webpack5-compiler-babel/preset.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at node:internal/modules/cjs/loader:1708:10

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":"/Users/oyvind/dev/webclient-app/node_modules/@storybook/addon-webpack5-compiler-babel/preset.js"} on level 1
Error: Cannot find module './dist/preset.cjs'
Require stack:
- ./node_modules/@storybook/addon-webpack5-compiler-babel/preset.js
- ./node_modules/@storybook/core/dist/common/index.cjs
- ./node_modules/storybook/dist/proxy.cjs
- ./node_modules/storybook/bin/index.cjs
    at Function.<anonymous> (node:internal/modules/cjs/loader:1249:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
    at Function._load (node:internal/modules/cjs/loader:1075:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at Object.<anonymous> (./node_modules/@storybook/addon-webpack5-compiler-babel/preset.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at node:internal/modules/cjs/loader:1708:10
✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes

[valentinpalkovic]

@osmestad

My bad. I missed some places. Here is another canary release:
3.0.4--canary.11.fd01da8.0

[osmestad]

Now I'm getting:

yarn
➤ YN0000: · Yarn 4.5.3
➤ YN0000: ┌ Resolution step
➤ YN0082: │ @storybook/addon-webpack5-compiler-babel@npm:3.0.4--canary.11.fd01da8.0: No candidates found

Not sure if it is not available yet?
I can try again next year! enjoy the holidays :-)