[Bug] Not working with `getAbsolutePath('@storybook/addon-svelte-csf')` in Storybook 8

[algoflows]

Note

This issue has a possible workaround

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Setup fresh storybook with svelte project
2. Use storybook 8
3. Follow svelte-csf install instructions
4. Error shown below.

Expected behavior

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

Screenshots and/or logs

▪▪▪▪ socgen-ui:storybook
(node:13628) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
@storybook/cli v8.0.0-rc.1

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/seanknowles/Projects/Zemili/moonrepo/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.

/Users/seanknowles/Projects/Zemili/moonrepo/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:1290:20)
    at Module._compile (node:internal/modules/cjs/loader:1342:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Object.newLoader (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)
    at loadPreset (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-common/dist/index.js:12:59)
    at loadPreset (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-common/dist/index.js:12:59)
    at async Promise.all (index 1)
    at async loadPresets (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-common/dist/index.js:12:483)
    at async getPresets (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-common/dist/index.js:12:1503)
    at async buildDevStandalone (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-server/dist/index.js:65:2020)
    at async withTelemetry (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/core-server/dist/index.js:28:3579)
    at async dev (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/cli/dist/generate.js:634:563)
    at async Command.<anonymous> (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/cli/dist/generate.js:636:250)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
WARN   Failed to load preset: {"type":"presets","name":"/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/@storybook/addon-svelte-csf/dist/index.js"} on level 1
/Users/seanknowles/Projects/Zemili/moonrepo/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:1290:20)
    at Module._compile (node:internal/modules/cjs/loader:1342:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Object.newLoader (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/Users/seanknowles/Projects/Zemili/moonrepo/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)

Environment

• OS: [e.g. iOS] - macos
• Node.js version: [e.g. v12.17.0] node 2021
• NPM version: [e.g. 6.14.4] - using Bun

Additional context

Add any other context about the problem here.

[JReinhold]

I am not seeing this in a minimal setup. Here's a sandbox that works fine with Storybook 8 and this addon: https://stackblitz.com/edit/github-mbaaau-wqykp4?file=src%2FButton.stories.svelte

Could you provide a minimal reproduction with a repo that I can check out?

Here are docs on how to create a minimal reproduction locally https://storybook.js.org/docs/contribute/how-to-reproduce, alternatively you can use https://storybook.new to create a minimal reproduction in StackBlitz.

Storybook sandboxes are just a given framework (in this case Svelte + Vite) with storybook@next init ran in it, which is as minimal as it gets.

[ChrisKnightLDN]

I ran into this issue. I found that a fix was to remove the getAbsolutePath

addons: [
		'@storybook/addon-svelte-csf',
		getAbsolutePath('@storybook/addon-links'),
		getAbsolutePath('@storybook/addon-essentials'),
		getAbsolutePath('@chromatic-com/storybook'),
		getAbsolutePath('@storybook/addon-interactions')
	],

[mdrokz]

I ran into this issue. I found that a fix was to remove the getAbsolutePath

addons: [
		'@storybook/addon-svelte-csf',
		getAbsolutePath('@storybook/addon-links'),
		getAbsolutePath('@storybook/addon-essentials'),
		getAbsolutePath('@chromatic-com/storybook'),
		getAbsolutePath('@storybook/addon-interactions')
	],

This works for me as well

[sacrosanctic]

The op's issue is because he is using a monorepo called moonrepo

I can confirm this is also bugged with turborepo, and the fix is the same.

[thebrandonlucas]

@ChrisKnightLDN Fixed my immediate issue and the server was able to start (I am also using turborepo sveltekit), but then I got a different error after the server started up:

On the server:

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/repo/src/voltage/frontend-turbo/node_modules/@storybook/svelte/dist/components/PreviewRender.svelte:56:9
  54 |      });
  55 |    }
  56 |  </script>
     |           ^
  57 |  
  58 |  <SlotDecorator {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
      at formatError (file:///Users/repo/src/voltage/frontend-turbo/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42645:46)
      at TransformContext.error (file:///Users/repo/src/voltage/frontend-turbo/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42641:19)
      at TransformContext.transform (file:///Users/repo/src/voltage/frontend-turbo/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:40447:22)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.transform (file:///Users/repo/src/voltage/frontend-turbo/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42919:30)
      at async loadAndTransform (file:///Users/repo/src/voltage/frontend-turbo/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:53385:29)

On the client:

Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/storybook/e86cc1ca60d8344c818e5bad4c91dc8957e7a32e6dbce0e86007cd2d02723fb1/sb-vite/deps/@storybook_svelte_dist_entry-preview__mjs.js?v=22c5d45c

[ndom91]

Having a similar issue.

• I'm on 8.4.3 for everything Storybook related
• vite@5.2.13
• svelte@5.0.0-next.243

Source files: gitbutlerapp/gitbutler@master...svelte-csf

`DemoButton.stories.svelte`

<script module lang="ts">
	import Button from '$lib/Button.svelte';
	import iconsJson from '$lib/data/icons.json';
	import { defineMeta } from '@storybook/addon-svelte-csf';

	const { Story } = defineMeta({
		title: 'Inputs / Button',
		component: Button,
		args: {
			type: 'button',
			size: 'tag',
			style: 'pop'
		},
		argTypes: {
			icon: { control: 'select', options: Object.keys(iconsJson) },
			type: { control: 'select', options: ['button', 'submit', 'reset'] },
			width: { control: 'text' },
			size: { control: 'select', options: ['tag', 'button', 'cta'] },
			align: {
				control: 'select',
				options: ['center', 'left', 'right', 'space-between']
			},
			style: {
				control: 'select',
				options: ['neutral', 'ghost', 'pop', 'success', 'error', 'warning', 'purple']
			},
			kind: { control: 'select', options: ['solid', 'soft'] }
		}
	});
</script>

<Story name="Demo Button" />

Server output

 Internal server error: Could not find variable declaration from 'defineMeta' call in the compiled output of the stories file: file:///opt/gitbutler/gitbutler/packages/ui/src/stories/button/DemoButton.stories.svelte

More info: https://github.com/storybookjs/addon-svelte-csf/blob/v5.0.0-next.11/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0002

  Plugin: storybook:addon-svelte-csf-plugin-post
  File: /opt/gitbutler/gitbutler/packages/ui/src/stories/button/DemoButton.stories.svelte
      at extractCompiledASTNodes (/opt/gitbutler/gitbutler/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.3_storybook@8.4.3_prettier@3._qfz2bs4ci7erg6gicuv6gaoow4/node_modules/@storybook/addon-svelte-csf/dist/parser/extract/compiled/nodes.js:81:15)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async TransformContext.transform (/opt/gitbutler/gitbutler/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.3_storybook@8.4.3_prettier@3._qfz2bs4ci7erg6gicuv6gaoow4/node_modules/@storybook/addon-svelte-csf/dist/compiler/plugins.js:78:38)
      at async Object.transform (file:///opt/gitbutler/gitbutler/node_modules/.pnpm/vite@5.2.13_@types+node@22.3.0/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52318:30)
      at async loadAndTransform (file:///opt/gitbutler/gitbutler/node_modules/.pnpm/vite@5.2.13_@types+node@22.3.0/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:55073:29)

[JReinhold]

@ndom91 based on the error shown that looks unrelated to this, could you open a new issue?

[ndom91]

Interestingly, I tried to set it up again from scratch and it now works with svelte@5.2.1 and 8.4.5 of all the storybook related libraries. For anyone curious, you can find the setup in our packages/ui/ directory here