Unable to import named mixin export

[patric-eberle]

I created the @verstaerker/vue-bem plugin. The plugin also provides a mixin as a named export. Unfortunately this seems not to work with vue-docgen-api (it does work inside the Vue application itself) and gives the following error:

Warning: Cannot parse app/components/e-heading.vue: Error: No suitable component definition found

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

The Plugin code

src/modules/mixin.js Holds the mixin code.

var mixin = {
  // ...
}
export default mixin;

src/index.js Creates the public exports.

export { default } from './modules/plugin';
export { default as bemMixin } from './modules/mixin';

The import

As described in the readme.

import { bemMixin } from '@verstaerker/vue-bem'

export default {
  mixins: [bemMixin],
  render(h) {
    const className = this.$bem('element');
    
    // ...
  }
}

vue-docgen-api seems to fail on the named export inside index.js. If I import the mixin file directly I don't get an error message.

Are you familiar with this issue? Maybe it's also a mistake on my side...

[patric-eberle]

We found a solution for us, that works at least as a workaround:

import * as bem from '@verstaerker/vue-bem'

export default {
  mixins: [bem.bemMixin]
}

This hardens my suspicion that the doc parser is not able to read the import { variable } from syntax.

[elevatebart]

@patric-eberle,

TLDR: I know how to fix it, It just needs some quick re-work.

For better performance, docgen does not evaluate components anymore. It uses AST to gather the information. To get all props and methods from mixins, it has to parse mixins the same way it pases components. It has to parse the mixin file. It is not following import patterns indeed.

Unfortunately, the case of an intermediary file is failing.

Expected:
component with mixin -> get variable name from mixin property -> get filePath from variable name -> get documentation from file

With the intermediary file, this solution tries to parse your intermediary file as a component. Of course does not find any component directly in the file.

The solution would be, if the exported varable resolves to an import, resolve the target file instead.

This should be done in utils/resolveExportedComponent.ts

If you feel like it, a PR is most welcome.

[vue-styleguidist-bot]

🎉 This issue has been resolved in version 3.3.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀