[Bug] Storybook crashes with the error of p has already been declared
#274
Comments
|
I've seen this error before when working on support for Svelte Reference: #195 In the previous case, the issue was that the props weren't destructured from the After a quick inspection at your repository. I noticed there's both modern and legacy API used in Can you update your config here: https://github.com/UNDP-Data/geohub/blob/39b1791004aef5cd73155469657ff99488a1e786/packages/svelte-undp-components/.storybook/main.ts#L9 |
|
@xeho91 thanks for your comment. I migrated all legacyAPI to new version of addon. there is still same error when I enable The bug of svelte-package with vitePreprocess seems not being solved yet. I could not switch back to vitePreprocess since building process will not finish forever. |
|
Perhaps you can try to use You'll likely be able to achieve it with using |
|
@xeho91 Thanks. I did not know |
|
Hm, on the second thought. I'm trying to think of a simpler solution/workaround for you. I wonder if you can use environment variable EDIT: Sorry, this one is not an environmental variable, AFAIK. CC @JReinhold is there anything we can use for this case? |
|
@xeho91 Thanks. I got idea from you and modified svelte.config.js like below. import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess:
process.env.STORYBOOK_BUILD === 'true'
? vitePreprocess({ script: true })
: sveltePreprocess({ scss: true }),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;then, changed scripts in package.json as follows. "scripts": {
"storybook": "STORYBOOK_BUILD=true storybook dev -p 6006",
"build-storybook": "STORYBOOK_BUILD=true storybook build"
},Somehow managed to switch preprocess module for storybook build. and packaging with svelte-package also works. I am not sure this is the best way to solve it though.... |
Describe the bug
I am trying to migrate storybook from svelte 4 to svelte 5 in my monorepo by using
5.0.0-next.23version of the addon.I did migration according to this guide (https://github.com/storybookjs/addon-svelte-csf/blob/next/MIGRATION.md).
After that, when I execute
pnpm storybook, storybook is launched in a browser tab, but it crashes immediately. and it shows the following error in console.I can see some error from
addon-svelte-csf, but I am not sure what causes this error. I tried to make a blank sveltekit project with storybook from scratch and compared settings between official demo and ours, I could not figure out why this error is happening.Does anyone have any idea how to solve this error?
Steps to reproduce the behavior
So far, it can be reproducible in our repo
fix/4333-svelte-5-componentsbranchpackages/svelte-undp-componentsExpected behavior
Storybook works without error as current version of svelte 4 does.
current svelte 4 version of storybook can be seen here (https://svelte-components.undpgeohub.org/)
Screenshots and/or logs
Environment
Additional context
addon-svelte-csf's*stories.svelteis mostly used undersrc/lib/components/maplibrefolder, and other components use*.stories.tsto test svelte components.When I remove
*.stories.sveltefiles onmain.ts(https://github.com/UNDP-Data/geohub/blob/develop/packages/svelte-undp-components/.storybook/main.ts) as below, storybook works fine.import type { StorybookConfig } from '@storybook/sveltekit'; const config: StorybookConfig = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)'], // this failed + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], // this works addons: [The text was updated successfully, but these errors were encountered: