Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Fails to load in Node 23 with SB_CORE-SERVER_0002 (CriticalPresetLoadError) #229

Open
JReinhold opened this issue Nov 12, 2024 · 1 comment
Open

[Bug] Fails to load in Node 23 with SB_CORE-SERVER_0002 (CriticalPresetLoadError) #229

JReinhold opened this issue Nov 12, 2024 · 1 comment
Labels
bug Something isn't working next Related to the next version

Comments

@JReinhold
Copy link
Collaborator

JReinhold commented Nov 12, 2024 •
edited
Loading

Describe the bug

When starting up a fresh Storybook project (both 8.3 and 8.4) with Svelte 5 and v5 of this addon, it fails to start with the error pasted below.

Downgrading Node to v22 fixes it. So does removing the addon and removing .svelte from the stories glob, which is why I've narrowed it down to this.

Steps to reproduce the behavior

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.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.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/@storybook/addon-svelte-csf/dist/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 [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)

More info:

    at loadPreset (./node_modules/@storybook/core/dist/common/index.cjs:139445:13)

More info:

    at loadPreset (./node_modules/@storybook/core/dist/common/index.cjs:139445:13)
    at async Promise.all (index 1)
    at async loadPresets (./node_modules/@storybook/core/dist/common/index.cjs:139455:55)
    at async getPresets (./node_modules/@storybook/core/dist/common/index.cjs:139488:11)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:48473:11)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:47080:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2877:3)
    at async r.<anonymous> (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2929:74)

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

WARN   Failed to load preset: {"type":"presets","name":"/Users/jeppe/dev/temp/sv2/node_modules/@storybook/addon-svelte-csf/dist/preset.js"} on level 1
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
(node:51681) ExperimentalWarning: CommonJS module /Users/jeppe/dev/temp/sv2/node_modules/@storybook/core/dist/common/index.cjs is loading ES Module /Users/jeppe/dev/temp/sv2/node_modules/@storybook/addon-svelte-csf/dist/preset.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:51681) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.

Environment

Storybook Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    **Node: 23.1.0** - ~/Library/Caches/fnm_multishells/45040_1731443426590/bin/node
    npm: 10.9.0 - ~/Library/Caches/fnm_multishells/45040_1731443426590/bin/npm <----- active
    pnpm: 9.12.0 - ~/Library/Caches/fnm_multishells/45040_1731443426590/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Edge: 130.0.2849.80
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: 8.3.6 => 8.3.6
    @storybook/addon-interactions: 8.3.6 => 8.3.6
    @storybook/addon-links: 8.3.6 => 8.3.6
    @storybook/addon-svelte-csf: ^5.0.0-next.11 => 5.0.0-next.11
    @storybook/blocks: 8.3.6 => 8.3.6
    @storybook/svelte: 8.3.6 => 8.3.6
    @storybook/sveltekit: 8.3.6 => 8.3.6
    @storybook/test: 8.3.6 => 8.3.6
    storybook: 8.3.6 => 8.3.6

Additional Context

Originally reported in sveltejs/cli#296 (comment) and sveltejs/cli#295
@JReinhold JReinhold added the bug Something isn't working label Nov 12, 2024
@JReinhold JReinhold mentioned this issue Nov 12, 2024
Closed
@xeho91
Copy link
Collaborator

xeho91 commented Nov 13, 2024 •
edited
Loading

Hm, so from the initial investigation.

I've been manually fixing the [ERR_UNSUPPORTED_DIR_IMPORT] errors inside node_modules/. Then I ended up with different errors. The last one that blocked me from continuing is:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._uocwypg2nwmmz5omf6wak5chkq/node_modules/@storybook/node-logger/package.json imported from /Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._uocwypg2nwmmz5omf6wak5chkq/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story/insert-description.js

While everything seems to be OK inside the package.json exports inside @storybook/node-logger. 🤷

EDIT. I was able to continue the @storybook/node-logger issue by changing:

	"exports": {
		".": {
			"types": "./shim.d.ts",
-                       "import": "./shim.mjs",
+			"default": "./shim.mjs",
			"require": "./shim.js"
		},
		"./package.json": "./package.json"
	},

There either has been some breaking change in Node.js that I am not aware of, or something else is causing all those different errors.

EDIT. I got it working for Node.js v23.
I've replaced every relative imports paths to use package.json#imports.
I'm not yet sure yet how to conclude this issue. Is the Node.js own feature a problem? Should we just stop using package.json#imports (I haven't tested if removing them completely works)?
Or you can't use both relative and package.json#imports at same time?

EDIT. The above solution breaks in Node.js v22 😐 with different error:

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: /Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]._mlbgkp7jlugd2nf3l45vsunbbu/node_modules/@storybook/addon-svelte-csf/dist/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 [ERR_INTERNAL_ASSERTION]: This is caused by either a bug in Node.js or incorrect usage of Node.js internals.
Please open an issue with this stack trace at https://github.com/nodejs/node/issues

    at assert (node:internal/assert:14:11)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:329:5)
    at new ModuleJobSync (node:internal/modules/esm/module_job:313:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:314:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1381:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Object.newLoader [as .mjs] (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/[email protected][email protected]/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)

More info:

    at loadPreset (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/common/index.cjs:139445:13)

More info:

    at loadPreset (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/common/index.cjs:139445:13)
    at async Promise.all (index 1)
    at async loadPresets (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/common/index.cjs:139455:55)
    at async getPresets (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/common/index.cjs:139488:11)
    at async buildDevStandalone (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/core-server/index.cjs:48473:11)
    at async withTelemetry (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/core-server/index.cjs:47080:12)
    at async dev (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/cli/bin/index.cjs:2877:3)
    at async r.<anonymous> (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core/dist/cli/bin/index.cjs:2929:74)

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

WARN   Failed to load preset: {"type":"presets","name":"/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]._mlbgkp7jlugd2nf3l45vsunbbu/node_modules/@storybook/addon-svelte-csf/dist/preset.js"} on level 1
Error [ERR_INTERNAL_ASSERTION]: This is caused by either a bug in Node.js or incorrect usage of Node.js internals.
Please open an issue with this stack trace at https://github.com/nodejs/node/issues

    at assert (node:internal/assert:14:11)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:329:5)
    at new ModuleJobSync (node:internal/modules/esm/module_job:313:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:314:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1381:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Object.newLoader [as .mjs] (/Users/xeho91/Nextcloud/Projects/xeho91/xeho91/node_modules/.pnpm/[email protected][email protected]/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
(node:89773) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ELIFECYCLE  Command failed with exit code 1.

And to fix this one, I had to revert the change in package.json#exports inside @storybook/node-logger.

@xeho91 xeho91 added the next Related to the next version label Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working next Related to the next version
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JReinhold @xeho91