Docs does not render Vue Mixin Properties

[Laslo89]

Describe the bug
My Button Component does receive a mixin
The mixin import path inside the vue component looks like this:
import SpMixinLink from '@mixins/sp-mixin-link'

@Mixins is a absolute path to the mixins

We use a lot of aliases for paths. In .storybook/main.js I use the webpackFinal property to tell storybooks webpack config our project aliases. This works fine except for @Mixins

However during the building of the storybook server it promps the following message:

45% building 296/312 modules 16 active /Users/mgohla/Projects/frontend/node_modules/@storybook/addon-docs/dist/frameworks/react/extractProps.jsNeither '@mixins/sp-mixin-link.vue' nor '@mixins/sp-mixin-link.js(x)' or '@mixins/sp-mixin-link/index.js(x)' or '@mixins/sp-mixin-link/index.ts(x)' could be found in '/Users/mgohla/Projects/frontend/src/components/sp-button'
45% building 299/315 modules 16 active /Users/mgohla/Projects/frontend/node_modules/es6-shim/es6-shim.jsNeither '@mixins/sp-mixin-link.vue' nor '@mixins/sp-mixin-link.js(x)' or '@mixins/sp-mixin-link/index.js(x)' or '@mixins/sp-mixin-link/index.ts(x)' could be found in '/Users/mgohla/Projects/frontend/src/components/sp-button'

Storybook starts up normally and will show all stories. Unfortunately it wont show the props inside the docs page which are injected throw a mixin. I can workaround this bug, if a use a relative path from my component to the mixin. Like this:

import SpMixinLink from './../shared/mixins/sp-mixin-link'

Expected behavior
Storybook shows mixin props and events in docs page

System:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.9.1 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Firefox: 71.0
Safari: 13.0.5
npmPackages:
@storybook/addon-a11y: 5.3.9 => 5.3.9
@storybook/addon-actions: 5.3.9 => 5.3.9
@storybook/addon-backgrounds: 5.3.9 => 5.3.9
@storybook/addon-console: 1.2.1 => 1.2.1
@storybook/addon-docs: ^5.3.9 => 5.3.9
@storybook/addon-knobs: 5.3.9 => 5.3.9
@storybook/addon-links: 5.3.9 => 5.3.9
@storybook/addon-notes: 5.3.9 => 5.3.9
@storybook/addon-viewport: 5.3.9 => 5.3.9
@storybook/addons: 5.3.9 => 5.3.9
@storybook/vue: 5.3.9 => 5.3.9

[shilman]

@Aaron-Pool @pocka @elevatebart Any ideas about this?

[pocka]

Probably #9615

[Laslo89]

@shilman @pocka
Thank you for your reply :)
I changed the preset file regarding your pull request. Unfortunately this changes nothing. I guess this happens at some point after parsing the stories. However if I alter the rule inside of main.js it works fine - mixins gets imported normally and props can be read.

what I did codewise:
// inside webpackFinal

const alias = {
  ...config.resolve.alias,
  ...require('../aliases.config').webpack,
}

config.module.rules.forEach(function(data, key) {
  if (data.loader === 'vue-docgen-loader') {
    let { options } = data
    data.options = {
      ...options,
      docgenOptions: {
        alias,
      },
    }
 }
})

[pocka]

@Laslo89
Could you provide a reproduction?
I created a simple setup using a mixin and alias with docgenOptions, and it works as expected. (The sandbox takes too long to start 😓)

Sorry, I misunderstood your comment...
I think something is missing in my PR. I'll check it later.

[Laslo89]

no prop, sry it would be a bit of a pain to put things up in a example repo but by now the bug is solved by applying my solution above :)

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.9 containing PR #9699 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[wickkidd]

@shilman the solution from #9699 isn't working for me either. I also resorted to using @Laslo89's approach.

See my more detailed comment in #9615.

[shilman]

@pocka is this something you can dig into a bit? ☝️ I just looked at the PR again and it looks fine, but clearly the wires are getting crossed somewhere.

[pocka]

@shilman It seems the preset get empty vueDocgenOptions (undefined).

I set up a simple sandbox and inject console.dir(options.vueDocgenOptions) into node_modules/@storybook/addon-docs/dist/frameworks/vue/preset.js just before the push statement. It prints undefined to console... I don't know why.

Is there any chance of the second argument of webpackFinal does not include preset options?

[shilman]

Thanks for looking into this @pocka 🙏

I'll see if I can pair on it with @ndelangen and figure out what's going on.

[jameskoehlerkilleen]

I'm using Typescript and Mixins and my Props are not showing up either with 6.0.28.

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-rc.2 containing PR #14227 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease