Storybook stuck at loading

Developing with Prismic
1

Hello Prismic community,

I followed the instruction on Set up Prismic in a Nuxt Project - Prismic, and setup a nuxt project with prismic slice machine and storybook. I'm able to start the slicemachine and it works fine. But when I try to start the storybook to capture the screenshot, it stuck at the loading bar forever, and there's no error reporting in the terminal console. Anyone experienced the same thing?

image
image2554×1243 40.4 KB

My package.json

"dependencies": {
"@nuxtjs/prismic": "^1.4.0",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"nuxt-sm": "^0.0.9",
"vue-slicezone": "^0.1.0",
},

"devDependencies": {
"@nuxtjs/storybook": "^4.2.0",
"@nuxtjs/vuetify": "^1.12.1",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/vue": "^6.4.0",
"slice-machine-ui": "^0.1.2",
"vue-loader": "15.9.6"
}

prismic --version
prismic-cli/4.2.0 win32-x64 node-v16.13.1

Here're a reproducible Github repo: prismic-nuxt-sm-storybook/demo at main · georgehua/prismic-nuxt-sm-storybook · GitHub

Many thanks!

3

Hi George, I'm going to investigate this for you and get back to you.

Thanks for sharing your project for us to check.

4

OK, can you try deleting your .nuxt-storybook, node_modules and package-lock.json files, update your package.json file with the following json and then run npm i.

{
  "name": "demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "slicemachine": "start-slicemachine",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxtjs/prismic": "^1.3.2",
    "cookies": "^0.8.0",
    "nuxt": "^2.15.8",
    "nuxt-sm": "^0.0.9",
    "vue-slicezone": "^0.1.0"
  },
  "devDependencies": {
    "@nuxtjs/storybook": "^4.2.0",
    "core-js": "^3.18.2",
    "sass": "^1.42.1",
    "sass-loader": "^10.1.0",
    "slice-machine-ui": "^0.1.2",
    "webpack": "^4.46.0"
  }
}

Also, change

  storybook: {
    // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
    stories: [...getStoriesPaths().map(path => path.replace("../", "~/")), ...getStoriesPaths()]
  },

to

  storybook: {
    // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
    stories: [...getStoriesPaths().map(path => path.replace("../", "~/")),]
  },

This worked on my side with your project.

Thanks.

1 Like
6

It would be awesome if you guys can update you docs to reflect the latest changes

7

Hey @yonatan.bk, thanks for the feedback. We're currently working on revamping the Nuxt documentation. So, changes can be expected soon. :smile:

9

Hey @yonatan.bk ,

For this particular issue, we've made an update in the CLI that stops this error. Hopefully, it should be released soon.

Thanks.