Failed to run command `nuxt-storybook`

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.

1 Like

Hi bipolab... I am in the same boat:

  • prismic-cli/4.2.0 darwin-x64 node-v16.13.0

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.

Running Storybook errors

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.

Thanks Phil.
Yesterday I was doing a test on how to install it. And I ended up combining an automatic installation that I read in this link: Configure a Project Automatically with Nuxt.js - Prismic and then I installed storybook.

At first, it did not give errors and I could see that when storybook asks you to overwrite the json or nuxt config file, it is just an update.

Although this has worked, I don't think it is the best way to do it, especially since when I went through the tutorial and created a model (Slice) the system crashed again.
The truth is I do not understand anything. Today I will try to retrace my steps to see if I have done something wrong.

Regards

I retraced my steps... the slicemachine works, however when adding the storybook module with your special command: prismic sm --add-storybook , I get the error log below. I wonder if I just revert to Nuxt documentation to add storybook... and then perhaps there is a more detailed post of the other steps you are doing to link the two?

Actually... I updated the CSSLoader version within the node modules... this appeared to allow the React build of Storybook. Now it boots, with a fair number of warnings... but I suppose that is ok, as it is running. (Thanks.)

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.

Still not working. I have 4 errors

ERROR in ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/prismic-test/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/prismic-test/node_modules/css-loader/dist/index.js:36:28)
 @ ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&) 4:14-340 15:3-20:5 16:22-348
 @ ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/NuxtLogo.vue
 @ ./.nuxt-storybook/components/index.js
 @ ./.nuxt-storybook/storybook/preview.js
 @ ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/prismic-test/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/prismic-test/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&) 4:14-354 15:3-20:5 16:22-362
 @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt-storybook/components/nuxt-error.vue
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/prismic-test/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/prismic-test/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-356 15:3-20:5 16:22-364
 @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt-storybook/components/nuxt-loading.vue
 @ ./.nuxt-storybook/App.js
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/prismic-test/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/prismic-test/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&) 4:14-387 15:3-20:5 16:22-395
 @ ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&
 @ ./.nuxt-storybook/prismic/pages/preview.vue
 @ ./.nuxt-storybook/router.js
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

This is my nuxt.config.js

import smConfig from "./sm.json";
import { getStoriesPaths } from "slice-machine-ui/helpers/storybook";

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'prismic-test',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [{
      charset: 'utf-8'
    }, {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1'
    }, {
      hid: 'description',
      name: 'description',
      content: ''
    }, {
      name: 'format-detection',
      content: 'telephone=no'
    }],
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    }]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [// https://go.nuxtjs.dev/eslint
  '@nuxtjs/eslint-module'],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [["@nuxtjs/prismic", {
    endpoint: smConfig.apiEndpoint || "",
    apiOptions: {
      routes: [{
        type: "page",
        path: "/:uid"
      }]
    }
  }], ["nuxt-sm"]],

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ["vue-slicezone", "nuxt-sm"]
  },

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

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

  generate: {
    fallback: '404.html' // Netlify reads a 404.html, Nuxt will load as an SPA
  }
};

Prismic version: prismic-cli/4.2.0 darwin-x64 node-v14.16.0
Node version: v14.16.0

It seems your issue is coming from the module CSS Loader what are you using this module for? Can you try removing it?

If this doesn't work, can you share your package.json?

{
  "name": "prismic-test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "slicemachine": "start-slicemachine",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxtjs/prismic": "^1.3.2",
    "@storybook/addon-actions": "^6.3.12",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "nuxt-sm": "^0.0.9",
    "vue-slicezone": "^0.1.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/storybook": "3.3.1",
    "@storybook/vue": "6.1.21",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "slice-machine-ui": "^0.1.2",
    "vue-loader": "15.9.6"
  }
}

I installed CSS Loader to see if it would fix anything, but it didn't.

OK, now you have removed CSS Loader, what is happening?

Same Errors :rofl: :rofl: :rofl:

How can you have this error if you removed CSS Loader? :joy:

Please try removing all your eslint plugins.

Thanks

Good Morning. I've done the following and it still doesn't work.

I have created a new Nuxt project without Eslint.
I am using Yarn
I have followed the steps of your tutorial.
I have installed
@ storybook / addon-actions in devDependencies
I have fixed the stories function:
stories: [... getStoriesPaths (). Map (path => path.replace ("../", "~ /"))]

My node and prismic version is:
prismic-cli/4.2.0 darwin-x64 node-v14.16.0

This is my package.json:

{
  "name": "bipolab-prismic",
  "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",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "nuxt-sm": "^0.0.9",
    "vue-slicezone": "^0.1.0"
  },
  "devDependencies": {
    "@nuxtjs/storybook": "3.3.1",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/vue": "6.1.21",
    "slice-machine-ui": "^0.1.2",
    "vue-loader": "15.9.6"
  }
}

My Nuxt Config:

import smConfig from "./sm.json";
import { getStoriesPaths } from "slice-machine-ui/helpers/storybook";
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'bipolab-prismic',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [{
      charset: 'utf-8'
    }, {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1'
    }, {
      hid: 'description',
      name: 'description',
      content: ''
    }, {
      name: 'format-detection',
      content: 'telephone=no'
    }],
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    }]
  },
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [["@nuxtjs/prismic", {
    endpoint: smConfig.apiEndpoint || "",
    apiOptions: {
      routes: [{
        type: "page",
        path: "/:uid"
      }]
    }
  }], ["nuxt-sm"]],
  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ["vue-slicezone", "nuxt-sm"]
  },
  storybook: {
    // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
    stories: [...getStoriesPaths().map(path => path.replace("../", "~/"))]
  },
  // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
  ignore: [...getStoriesPaths().map(path => path.replace("../", "~/"))],
  generate: {
    fallback: '404.html' // Netlify reads a 404.html, Nuxt will load as an SPA

  }
};

I have this 4 errors:

**ERROR** in ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/dist/index.js:36:28)
 @ ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&) 4:14-340 15:3-20:5 16:22-348
 @ ./components/NuxtLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/NuxtLogo.vue
 @ ./.nuxt-storybook/components/index.js
 @ ./.nuxt-storybook/storybook/preview.js
 @ ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

**ERROR** in ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&) 4:14-354 15:3-20:5 16:22-362
 @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt-storybook/components/nuxt-error.vue
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

**ERROR** in ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-356 15:3-20:5 16:22-364
 @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt-storybook/components/nuxt-loading.vue
 @ ./.nuxt-storybook/App.js
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

**ERROR** in ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/bentagai/Public/bipolab-prismic/node_modules/css-loader/dist/index.js:36:28)
 @ ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css& (./node_modules/vue-docgen-loader/lib??ref--8!./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&) 4:14-387 15:3-20:5 16:22-395
 @ ./.nuxt-storybook/prismic/pages/preview.vue?vue&type=style&index=0&id=853fc144&scoped=true&lang=css&
 @ ./.nuxt-storybook/prismic/pages/preview.vue
 @ ./.nuxt-storybook/router.js
 @ ./.nuxt-storybook/index.js
 @ ./.nuxt-storybook/storybook/nuxt-entry.js
 @ ./.nuxt-storybook/storybook/entry.js
 @ ./.nuxt-storybook/storybook/storybook-init-framework-entry.js
 @ multi ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

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.