storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
98 stars 29 forks source link

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

Open algoflows opened 4 months ago

algoflows commented 4 months ago

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

Screenshot 2024-03-07 at 00 40 50
▪▪▪▪ 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

Additional context

Add any other context about the problem here.

JReinhold commented 3 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 3 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 3 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