[Bug] Setup with sveltekit fails

[CarlAmbroselli]

Describe the bug

I'm trying to get this to run, but it fails to start.

Key differences from readme:

• Monorepo setup (hence my node_modules are one folder up)
• in vite config: import { sveltekit } from '@sveltejs/kit/vite'; instead of using@sveltejs/vite-plugin-svelte
• in storyboard config: framework is @storybook/sveltekit instead of @storybook/svelte-vite

I'm using a monorepo, hence the node_modules folder is one layer above my project.

My .storybook/main.js file looks like the following:

import { join, dirname } from 'path';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value) {
	return dirname(require.resolve(join(value, 'package.json')));
}

/** @type { import('@storybook/sveltekit').StorybookConfig } */
const config = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)'],
	addons: [
		getAbsolutePath('@storybook/addon-links'),
		getAbsolutePath('@storybook/addon-essentials'),
		getAbsolutePath('@storybook/addon-interactions'),
		getAbsolutePath('@storybook/addon-svelte-csf')
	],
	framework: {
		name: getAbsolutePath('@storybook/sveltekit'),
		options: {}
	},
	docs: {
		autodocs: 'tag'
	}
};
export default config;

One thing that stands out to me is the getAbsolutePath('@storybook/sveltekit'), piece, which differs from the README, but is afaik the new supported framework. The getAbsolutePath part of it was auto-generated from the npx storybook@latest init command already, which detected the monorepo setup.

Also, this is sveltekit, so in my vite config I'm not using '@sveltejs/vite-plugin-svelte, but instead import { sveltekit } from '@sveltejs/kit/vite';, which also differs from the README.

Screenshots and/or logs

storybook dev -p 6006
@storybook/cli v7.5.3

(node:78056) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
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: /Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/index.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.

/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^

SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (/Developer/test_project/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/Developer/test_project/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at loadPreset (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:82)
    at loadPreset (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:82)
    at async Promise.all (index 1)
    at async loadPresets (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:505)
    at async getPresets (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:1525)
    at async buildDevStandalone (/Developer/test_project/node_modules/@storybook/core-server/dist/index.js:119:1599)
    at async withTelemetry (/Developer/test_project/node_modules/@storybook/core-server/dist/index.js:103:3903)
    at async dev (/Developer/test_project/node_modules/@storybook/cli/dist/generate.js:473:401)
    at async Command.<anonymous> (/Developer/test_project/node_modules/@storybook/cli/dist/generate.js:475:225)

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

WARN   Failed to load preset: {"type":"presets","name":"/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/index.js"} on level 1
/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^

SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (/Developer/test_project/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/Developer/test_project/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

• OS: MacOS
• Node.js version: v21.1.0
• NPM version: 10.2.0
• Browser (if applicable): Chrome

Versions

    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-svelte-csf": "^4.0.13",
    "@storybook/blocks": "^7.5.3",
    "@storybook/svelte": "^7.5.3",
    "@storybook/svelte-vite": "^7.5.3",
    "@storybook/sveltekit": "^7.5.3",
    "@storybook/testing-library": "^0.2.2",
    "@sveltejs/adapter-auto": "^2.1.0",
    "@sveltejs/adapter-vercel": "^3.0.3",
    "@sveltejs/kit": "^1.23.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.1",
    "eslint-plugin-storybook": "^0.6.15",
    "eslint-plugin-svelte": "^2.33.0",
    "prettier-plugin-svelte": "^3.0.3",
    "storybook": "^7.5.3",
    "svelte": "^4.2.0",

I'd appreciate any help around what else I could try to get this to work!

[tomolenet]

Same here but using svelte-vite without sveltekit.

We can fix this by removing getAbsolutePath and do not use workspaces in the package.json of our monorepo.

[j3rem1e]

Do you have a repo where I can test this setup ?

[tomolenet]

Try it here: https://github.com/tomolenet/addon-svelte-csf-160

[tomolenet]

Any news on this? Can we support? Looks like the compiler can not parse Svelte?

/home/devs/addon-svelte-csf-160/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^

SyntaxError: Unexpected token '<'

[JReinhold]

@tomolenet does the workaround mentioned at storybookjs/builder-vite#321 (comment) solve your issue?

[tomolenet]

Yes, it seems to work. I tested it here.

It seems to work now that you just have to remove getAbsolutePath. The workspace in package.json can stay.