Svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

[doolijb]

Describe the bug
Fresh Svelte/Vite project initiated with Routify 3.
JS/X method of declaring decorators are broken, so I attempted to use svelte syntax for stories instead as a workaround.

Using FooBar.stories.svelte format results in error Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

To Reproduce
$ npx @roxi/routify@next create MyApp
$ npm i
$ npx sb init
- Yes to v7 migration
- Write a basic component with a svelte native story
$ npm run storybook
Error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

System

System:
    OS: Linux 5.15 Zorin OS 16.1
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Firefox: 104.0
  npmPackages:
    @storybook/addon-actions: ^6.5.12 => 6.5.12 
    @storybook/addon-essentials: ^6.5.12 => 6.5.12 
    @storybook/addon-interactions: ^6.5.12 => 6.5.12 
    @storybook/addon-links: ^6.5.12 => 6.5.12 
    @storybook/builder-vite: ^0.2.2 => 0.2.2 
    @storybook/svelte: ^6.5.12 => 6.5.12 
    @storybook/testing-library: ^0.0.13 => 0.0.13 

[IanVS]

@doolijb You'll need to install and use https://github.com/storybookjs/addon-svelte-csf in order to write svelte-native stories.

[doolijb]

@doolijb You'll need to install and use https://github.com/storybookjs/addon-svelte-csf in order to write svelte-native stories.

Oh weird, is csf bundled in now?
Regardless, installing and declaring it in main.cjs gives the same result.

[IanVS]

Any chance you could create a minimal reproduction, or share a link to your project if it's open source?

[doolijb]

Any chance you could create a minimal reproduction, or share a link to your project if it's open source?

https://github.com/doolijb/19217_sb_svelte_reprod

Just in case, I added svelte-csf and declared it in the addons, but it makes no difference. Otherwise this is a barebones install with the example button story swapped out for one in svelte syntax.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.35 containing PR #19339 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[glitchedgitz]

Hey @shilman,
Got the same error, so I upgraded.
Got this error now

> test-storybook@0.0.1 storybook
> start-storybook -p 6006

'start-storybook' is not recognized as an internal or external command,
operable program or batch file.

[IanVS]

@glitchedgitz there are some changes in 7.0, you should be able to run npx sb@next automigrate to take care of most of them, including the error you're seeing. And be sure to check out MIGRATION.md for the full list of changes.

[octoxan]

Have the same error in 7.0, and that automigrate command is basically useless.

[IanVS]

@octoxan can you open a new issue with the details of the error you're seeing and the output of the automigrate command? And please tag me in it so I see it?