"open in Storybook" not working

Hi everyone,

I'm following a tutorial on Prismic and Nextjs.
https://www.youtube.com/watch?v=T4XCWSjLtXE&list=PL6hQmTdrFkyTKYFHPy1FrXGoqvMlFvOO2&index=22&t=3257s

While using the Prismic Builder I encountered two issues, probably related to each other.

When clicking on "Open in Storybook" the following error is displayed in Storybook:

I suspect something is wrong with the URL from the prismic builder. It generates the following URL:
http://localhost:6006//?path=/story/slices-sectiontestimonials--default-slice
url-prismic-builder

When I remove one of the slashes, it seems working.
http://localhost:6006/?path=/story/slices-sectiontestimonials--default-slice

Do you have an idea how to solve the issues?

Thanks and best regards,
Wendelin

Hello @wendelin.steiner

Thanks for reaching out to us.

The storybook path should be with a single slash. Can you tell me what version of Storybook you have in the package.json file? Try to update the Storybook with the prismic sm --add-storybook command.
Are you getting any warnings when you click on the warnings button on the left side? Please follow nuxt.js documentation.

Thanks,
Priyanka

Hello @Priyanka

Thanks for your quick answer.

I'm using the 6.4.9 version of prismic.

I gave it a try with prismic sm --add-storybook. This didn't solve my issue, but helped me narrow down the problem:

I copied the code from for the sm.json file from the following guide:

https://prismic.io/docs/technologies/storybook-nextjs

The value for the key "storybook" seems to be the erroneous.

After getting rid of the additional slash for storybook everything worked as expected. Please test it as well on your end and update the documentation.

Best regards,
Wendelin

It should work with http://localhost:6006/. I will surely test on my side and update the documentation accordingly.
Would you please tell me which framework you are using with Slicemachine: Next.js or Nuxt.js? Because tutorial you shared with me it's about nuxt.js.

I'm using Next.js and did the setup according to the following guide:
https://prismic.io/docs/technologies/nextjs

I have teste documentations, and it works well for me with this path in sm.json:
"storybook": "http://localhost:6006/",

Can you send me a zip file of your project to test it on my side? Which OS are you using?

Thanks,
Priyanka

Feel free to download the current test setup from github. I'll put the visibility on public for a moment.
With this commit I fixed the bug for the storybook url:

https://github.com/2Up1Down/wendelin-tech/commit/26d65880cec4509398f2a51a1a4635765a49c2cd

Best regards and happy new year!

I had the exact same line as the documentation, on the sm.json, and it did not work for me, until I've fixed it according to wenedlin.steiner's solution.

Thank you.

Hello @redsport-test @wendelin.steiner

I am experiencing the same issue with my next-sm project too. This issue is coming while redirecting from the Slice builder to the Storybook. I will report this issue to my SM team and update the documentation accordingly.

Meantime, you can fix this issue while removing the slash in this path at the end "storybook": "http://localhost:6006/", in sm.json fie (that you are already doing ). Or hit the Storybook server directly http://localhost:6006 in the browser.

Thanks for pointing this out.
Priyanka

Hello @redsport-test @wendelin.steiner

We have updated our documentation. Thanks again for pointing this out.

Feel free to reach out to us if you have any questions.

Best
Priyanka