Storybook: Components with mixins are not rendering the props table correctly

[leandromatos]

Version

@nuxtjs/storybook: 3.0.0
nuxt: 2.14.7

Reproduction Link

https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274

Steps to reproduce

Just await the project starts

What is Expected?

In AwesomeButton, in the Props table, a property called "icon" should appear, which is inside the mixin used by the component.

What is actually happening?

Apparently, the configuration made for the addon @storybook/addon-docs inside nuxt.config.js is not working, as an error message appears in the terminal:

Neither '@/mixins/SomeMixin.vue' nor '@/mixins/SomeMixin.js(x)' or '@/mixins/SomeMixin/index.js(x)' or '@/mixins/SomeMixin/index.ts(x)' could be found in '/sandbox/components'

[elevatebart]

In your nuxt.config.js there is a weird line.

Since the nuxt.config.js is on the root of your project, I would use __dirname for @ instead

import { resolve } from "path";

export default {
  components: true,
  storybook: {
    stories: ["~/components/**/*.stories.mdx"],
    addons: [
      {
        name: "@storybook/addon-docs",
        options: {
          vueDocgenOptions: {
            alias: {
              // instead of path.resolve(__dirname, '../') use __dirname
              // that would take you in the parent directory of your project... hum
              "@": __dirname,
            },
          },
        },
      },
      "@storybook/addon-controls",
      "@storybook/addon-essentials",
    ],
  },
};

[leandromatos]

I'm sorry @elevatebart, this line was copied from another project of mine in which the settings of nuxt.config.js are inside a directory with modularized files.

Even changing to your suggestion, the error continues, see: https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274

[elevatebart]

The expected options should be passed to this preset

https://github.com/storybookjs/storybook/blob/master/addons/docs/src/frameworks/vue/preset.ts

But here is the list of keys that are logged out for the options (there should be a vueDocgenOptions).

["configType",
"outputDir",
"cache",
"_events",
"_eventsCount",
"_maxListeners",
"commands",
"options",
"parent",
"_allowUnknownOption",
"_args",
"rawArgs",
"_scriptPath",
"_name",
"_optionValues",
"_storeOptionsAsProperties",
"_passCommandToAction",
"_actionResults",
"_actionHandler",
"_executableHandler",
"_executableFile",
"_defaultCommandName",
"_exitCallback",
"_aliases",
"_hidden",
"_helpFlags",
"_helpDescription",
"_helpShortFlag",
"_helpLongFlag",
"_hasImplicitHelpCommand",
"_helpCommandName",
"_helpCommandnameAndArgs",
"_helpCommandDescription",
"program",
"Command",
"Option",
"CommanderError",
"_version",
"_versionOptionName",
"versionUpdates",
"releaseNotes",
"dll",
"args",
"framework",
"rootDir",
"configDir",
"port",
"nuxt",
"nuxtBuilder",
"nuxtWebpackConfig",
"nuxtStorybookConfig",
"mode",
"staticDir",
"packageJson",
"ignorePreview",
"docsMode",
"versionCheck",
"releaseNotesData",
"presets",
"babelOptions",
"entries",
"stories",
"typescriptOptions",
"presetsList"]

Still investigating, but now this nuxt plugin looks like the right place to do so.

[elevatebart]

How is the storybook configuration transmitted to the dev-server?

https://github.com/nuxt-community/storybook/blob/master/src/index.ts#L16

This line tends to send a very nuxt specific block to a storybook function, is it picked up later by another tool that adapts it for storybook? Am I missing something?

[leandromatos]

I didn't understand your question very well @elevatebart.

@farnabaz, can you help us understand what's going on?

[elevatebart]

I am wondering how the addon options are meant to be transmitted from nuxt.config.js to storybook in the internals of the current plugin.

Indeed, storybook loaders do not receive the options they are meant to. So vue-docgen-api does not get it either and fails.

[leandromatos]

The storybook even receives the options that are passed in Nuxt Config, but mysteriously, the vueDocgenOptions option (line 12 https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274) is not passed on to the Storybook, so the vueDocgenOptions options are never applied.

Is this the conclusion that you also reached @elevatebart ?

[elevatebart]

Yep exactly

[leandromatos]

I'm confused, I don't know if it's a nuxtjs/storybook or storybook bug.

@shilman Can you help us investigate this problem as well?

[elevatebart]

After trying it out on storybook, I am pretty sure it's a nuxt/storybook bug.

[leandromatos]

@elevatebart Have you tested the storybook on a pure Vue project? Do vueDocgenOptions options work on this project?

I would like to see more details. Can you create this project on CodeSandbox?

I can try to investigate the Nuxt plugin for Storybook more deeply.

[farnabaz]

Sorry for the late response. I tried to use vueDocgenOptions with the vanilla storybook and my attempts are failed. Did you manage to user vueDocgenOptions without NuxtStorybook?

Anyway @ is an internal alias in Nuxt and it should be available out of the box.

[elevatebart]

@farnabaz you are absolutely right.
This issue is with storybook itself.
@pocka created an initial fix for this that did not have a test and I am thinking that the upgrade to v6 brought in the regression.

[jameskoehlerkilleen]

All of my Storybook projects have this issue as well when using Mixins from "vue-property-decorator"

Storybook version is 6.0.28

[avillapalos]

Hi!

I was having this problem from almost one month but now I've finally solved it, I'm not sure what has been the definitive fix, this is what I've done:

Storybook 6.1.21 version.

Installed in package.json:

"dependencies": {
    "node-sass": "^5.0.0",
  },
  "devDependencies": {
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue": "^6.1.21",
    "sass": "^1.32.7",
    "sass-loader": "^10.1.1",
  }

main.js:

const path = require('path')

module.exports = {
  stories: ['../**/*.stories.ts'],
  addons: [
    '@storybook/preset-scss'
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal(config, options) {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../'),
      '~': path.resolve(__dirname, '../'),
    }
    return config
  },
}

preview.js (I added this line within the rest of the code, which is no revelant due to this issue):
import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

My scss-loader.scss file:

@import "../assets/styles/basic/_mainVariables";
@import "../assets/styles/basic/_mixins";
@import "../assets/styles/basic/_styleFonts";
@import "../assets/styles/basic/main";

Also, I needed to import the global SCSS files into every single SCSS which uses variables or mixins.

With all of this configuration, I'm finally able to work with Storybook and mixins!

[pocka]

The vueDocgenOptions issue was resolved in https://github.com/storybookjs/storybook/pull/14227, available from v6.2.0-rc.2.
(And sorry for that problem... it existed from the beginning)

I'm not sure the patch will be applied to v6.1.x though.

[jameskoehlerkilleen]

The vueDocgenOptions issue was resolved in storybookjs/storybook#14227, available from v6.2.0-rc.2.
(And sorry for that problem... it existed from the beginning)

I'm not sure the patch will be applied to v6.1.x though.

Is there anything that needs to be done to make this work? I'm using 6.2.5 with Vue 2 and my mixin props are not showing up still.