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

algoflows commented 9 months ago

[!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

Setup fresh storybook with svelte project
Use storybook 8
Follow svelte-csf install instructions
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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 4 months ago

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 commented 3 months ago

@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 commented 2 weeks ago

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: https://github.com/gitbutlerapp/gitbutler/compare/master...svelte-csf

`DemoButton.stories.svelte`

```svelte ```

Server output

```sh 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 commented 2 weeks ago

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

ndom91 commented 5 days ago

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

storybookjs / addon-svelte-csf