Hi, I'm following the tutorial to install nuxt-storybook but it doesn't work.
When I run "prismic sm --add-storybook", it creates a conflict where I have to overwrite both the package.json file and the sm.json file.
Second, it doesn't install the ".nuxt-storybook" and ".slicemachine" folders
Can someone help me please. I do not understand absolutely anything of what is happening and I have wasted all day dealing with this problem.
Hi bipolab... I am in the same boat:
And general package.json as:
"dependencies": {
"@nuxtjs/prismic": "^1.3.2",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"nuxt-sm": "^0.0.8",
"vue-slicezone": "^0.1.0"
},
"devDependencies": {
"@nuxtjs/storybook": "4.0.2",
"@nuxtjs/tailwindcss": "^4.2.0",
"@storybook/vue": "6.1.21",
"@vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.0.5",
"jest": "^27.0.5",
"postcss": "^8",
"slice-machine-ui": "^0.1.1",
"vue-jest": "^3.0.4",
"vue-loader": "15.9.6"
}
}
Hi Team,
I'm sorry to see you're having this issue. I'm going to investigate this now.
Thanks.
Hey @bipolab & @australian.nick ,
I was investigating this and have encountered the same issue.
So there's a few things:
This is a bit of misinformation in the documentation, these files are generated when you run npm run storybook and npm run slice machine respectively.
Overwrite is probably the wrong word to use in the command, it will update these files. If you enter d when it questions you whether to overwrite these files is will show you the changes it will make and you can see there's no issue here.
When I ran npm run storybook on my side I got 2 errors:
The second error I resolved by running:
npm install --save @storybook/addon-actions
But for the error about Storybook and Slice Machine, I haven't been able to find a solution and it's still causing the following error.
✖ Nuxt Fatal Error
Failed to run command `nuxt-storybook`:
Error: Command failed with exit code 1: nuxt-storybook
I'm still investigating and I'll bring this up with the team to try and get this working. Once I know more I'll update you here.
Thanks.
Phil, thanks for your follow up. I'll watch with interest and push around myself a bit more too. Cheers.
OK, I figured it out. The script adds the following, in the nuxt.config.js:
stories: [...getStoriesPaths().map(path => path.replace("../", "~/")), ...getStoriesPaths()]
You need to replace this with:
stories: [...getStoriesPaths().map(path => path.replace("../", "~/"))]
The second getStoriesPaths() function is an error and the team is fixing this now.
Hey Team,
So I was able to recreate your issue, thank you for providing me with all the information. Once I changed my Node version to V.14 I got the same error as you.
The fix is either to upgrade to Node V.16, or to update @nuxtjs/storybook & @storybook/vue with:
npm i @nuxtjs/storybook@latest @storybook/vue@latest
Also you don't need @storybook/addon-actions installed.
I'm glad we figured this out together, thanks.
bipolab-prismic copia.zip (335.3 KB)
Prismic and Node version: prismic-cli/4.2.0 darwin-x64 node-v16.13.0
Hey,
So I didn't realise you were testing in Yarn. It seems there's an issue with the Yarn, Nuxt and Webpack with the css loader. You need to install sass-loader to get this working.
yarn add sass-loader@10.1.0
Remember to delete your yarn.lock when installing the node modules from scratch. I also updated these packages to the latest:
"@nuxtjs/storybook": "^4.2.0",
"@storybook/vue": "^6.4.0",
Here's your project working:
bipolab-prismic-edit.zip (349.2 KB)
Solved!!!! Thank you Phil!!!
If someday I find you on the street, let me buy you a beer !! XDXD
That's my sort of reward 
Happy to help, I've passed all this feedback to the team.
I'm going to clean this thread up a bit now.
I was having a similar issue as well and this guide was perfect and I was able to run slicemachine and storybook. But now when I run "yarn dev" I get
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'order'.
I've tried installing the postcss and cssloader dependancies and that leads to a different error below.
TypeError: this.getOptions is not a function in vue.js
Any guidance on this would be great.
Can you try deleting your node modules and yarn lock, then running yarn add again?
Deleting the node modules and running yarn again seemed to fix it. Thank you, finally up and running!
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.