Svelte 4 - Storybook 7 - Errors | Storybook | Page 1

river aurora Sep 13, 2023, 12:38 PM

#

Can you run npm ls set-function-name?

viral kiln Sep 13, 2023, 12:40 PM

#

extranet@0.0.1 /home/thibault/Gitlab/MyApp
└─┬ @storybook/testing-library@0.2.0
└─┬ @testing-library/dom@9.3.1
└─┬ aria-query@5.1.3
└─┬ deep-equal@2.2.2
└─┬ regexp.prototype.flags@1.5.1
└── set-function-name@2.0.0

river aurora Sep 13, 2023, 12:41 PM

#

Looks like it's a known issue: https://github.com/ljharb/set-function-name/issues/1

GitHub

Missing dependency on package.json · Issue #1 · ljharb/set-function...

Error: Cannot find module 'functions-have-names' Require stack: /home/nolddor/gems-steam-bot/node_modules/set-function-name/index.js

#

for now I bet you can install functions-have-names manually

viral kiln Sep 13, 2023, 12:56 PM

#

Is there no solution? 🤔

river aurora Sep 13, 2023, 1:13 PM

#

You can install it manually

#

npm i -D functions-have-names or whatever package manager you use

viral kiln Sep 13, 2023, 1:43 PM

#

ok thanks
It's works with cache clean

#

Getting Started example failed 😢

river aurora Sep 13, 2023, 2:18 PM

#

@crystal sparrow or @wild matrix any idea why the types would be failing on the default svelte example?

viral kiln Sep 13, 2023, 2:20 PM

#

<script lang="ts">
    export let primary = false
    export let backgroundColor: string | undefined = undefined
    export let size: 'small' | 'medium' | 'large' = 'medium'
    export let label: string = ''

    $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'

    $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''
</script>

<button
    type="button"
    class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
    {style}
    on:click
>
    {label}
</button>

import type { Meta, StoryObj } from '@storybook/svelte'

import Button from './Button.svelte'

const meta = {
    title: 'Composants/Button',
    component: Button,
    tags: ['autodocs'],
    argTypes: {
        backgroundColor: { control: 'color' },
        size: {
            control: { type: 'select' },
            options: ['small', 'medium', 'large']
        }
    }
} satisfies Meta<Button>

export default meta

type Story = StoryObj<typeof meta>


export const Primary: Story = {
    args: {
        primary: true,
        label: 'Button'
    }
}

Other example with small adjustments 🤡

crystal sparrow Sep 13, 2023, 2:35 PM

#

viral kiln Getting Started example failed 😢

This looks like a mismatch version between Svelte 3 and 4.
Is there any way you have Svelte 3 somewhere hanging around?

viral kiln Sep 13, 2023, 2:42 PM

#

    "@playwright/test": "^1.28.1",
    "@storybook/addon-essentials": "^7.0.0-beta.51",
    "@storybook/addon-interactions": "^7.0.0-beta.51",
    "@storybook/addon-links": "^7.0.0-beta.51",
    "@storybook/blocks": "^7.0.0-beta.51",
    "@storybook/svelte": "^7.0.0-beta.51",
    "@storybook/svelte-vite": "^7.0.0-beta.51",
    "@storybook/sveltekit": "^7.5.0-alpha.2",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-node": "^1.2.3",
    "@sveltejs/kit": "^1.24.1",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-storybook": "^0.6.10",
    "eslint-plugin-svelte3": "^4.0.0",
    "functions-have-names": "^1.2.3",
    "prettier": "^2.8.0",
    "prettier-plugin-svelte": "^2.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "7.4.1",
    "svelte": "3.55.1",
    "svelte-check": "^3.4.3",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^4.4.2",
    "vitest": "^0.32.2"

#

OK
Go to "@sveltejs/kit": "^1.25.0", and "svelte": "^4.2.0",

crystal sparrow Sep 13, 2023, 2:58 PM

#

Ah I see, you're using a pretty old version of all the Storybook packages, that don't support Svelte 4. I suggest you upgrade them all with "npx storybook@lastest upgrade"

I also see you have a newer version of @storybook/sveltekit, how did you end up in the situation of having different versions of the Storybook packages?

viral kiln Sep 13, 2023, 3:27 PM

#

I think it's with cmd npx sb init
or npx storybook@next init

Storybook + Svelte lacks the documentation you need to understand everything. And the csf plugin doesn't work for me.
Maybe versionning problem

#

And your command :

npx storybook@lastest upgrade
npm ERR! code ETARGET
npm ERR! notarget No matching version found for storybook@lastest.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

crystal sparrow Sep 13, 2023, 3:45 PM

#

viral kiln And your command : ```js npx storybook@lastest upgrade npm ERR! code ETARGET np...

Sorry I mistyped. It's npx storybook@latest upgrade

waxen sierra Sep 14, 2023, 12:50 AM

#

I installed storybook into an existing sveltekit project -- but Storybook cannot find my components, which are in src/lib/components -- was I expecting too much?, now I get generic links to storybook help pages

viral kiln Sep 14, 2023, 6:46 AM

#

crystal sparrow Sorry I mistyped. It's `npx storybook@latest upgrade`

It works, but every other time I can't get the yarn storybook command to work
Because :

yarn run v1.22.19
warning ../../package.json: No license field
$ storybook dev -p 6006
🔴 Error: It looks like you are having a known issue with package hoisting.
Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092


/home/thibault/Gitlab/MyApp/node_modules/cli-table3/src/utils.js:1
const stringWidth = require('string-width');

I have to delete my node_modules and yarn.lock and make a new yarn.

#Svelte 4 - Storybook 7 - Errors