TypeError: Cannot read property 'default' of undefined

[casio]

Using a vue-cli 3.03 generated vanilla project and this repo as the first plugin. Starting the styleguide task will show below warning, start the server but without showing AppButton docs.

Warning: Cannot parse src/components/AppButton.vue: TypeError: Cannot read property 'default' of undefined

This seems related to the import in the example component - when you remove sizeMixin the docs will be rendered just fine. I guess that is related to a missing webpack/babel config - have an idea?

[DanielPe05]

Any ideas what could be causing this? I'm seeing the same exact thing

[rafaesc]

Hi there, Can you create an example to review it?

[elevatebart]

It is cause by the upgrade of vue-dcgen-api to babel 7. Vue styleguidist sued to able to compile .vue files that had dependencies. It seems to be broken now. For instance the following menu will fail.

<template>
<div>
{{profileName}}
<CustomMenu/>
</div>
</template>
<script>
import CustomMenu from "./CustomMenu";

export default {
name: "nav-bar",
components:{CustomMenu}
}
</script>

I believe it's a bug in vue-docgen-api and I have the same issue. For now, I ignored all the components that had imports from the styleguide but it does not seem like a durable solution.

@rafaesc to have a reproductible repo just open a command prompt and type

> npm install --global @vue/cli
> vue create test-bug --default
> cd test-bug
> vue add styleguidist
> npm run styleguide

The standard is failing

[elevatebart]

I found the issue, and suggested a fix here: vue-styleguidist/vue-docgen-api#52

@rafaesc There must be a better way to change babel "require" selectively.

[elevatebart]

This looks like either a bug on babel or an incompatibility between the runtime and the core we have. Anyway the first line

import MyComp from './MyComp.vue';

is transformed into:

var _interopRequireDefault = require("@babel/runtime/helpers/builtin/es6/interopRequireDefault");
var _caretMenu = _interopRequireDefault(require("@molecules/caretMenu"));

but the code of interopRequireDefault exports a 'default', it is an es6 module. Therefore, it cannot be imported this way. I got it traced back to @vue/cli-plugin-babel who forces the beta 47 of babel 7 in the dependencies.

Good night.

[casio]

I can confirm @elevatebart fix is working in my vanilla project - nice, thx! : )

will test this in my production project as well and report back here

[rafaesc]

@casio I have already updated vue-docgen-api

Try to install the last version of vue-docgen-api

[elevatebart]

Hey @casio ! Can I close this then ? I am trying to clean up a little.

[casio]

Hey @elevatebart - yea sure, lets close this: just had another attempt with a vanilla setup and the issue is gone!

Unfortunately I wasnt yet able to try in my production env, but once I do I'll eventually add a new ticket. Thanks again for checking back!

[flozero]

why close the examples folder are not updated all solutions are not working for me really boring...

[elevatebart]

Hello, salut,

If you had this issue cannot read property default of undefined, it either has to do with using the latest version of Babel. In order to optimize parsing of the documentation, vue docgen api evaluates thé component after replacing all requires by meaningless objects.

It failing in a lot of cases flagged AST in docgen issues. I am working on a permanent solution in a PR. I will discuss this with @rafaesc.

Your issue and opinion is important to us. Hope you will enjoy the new version

[JessicaSachs]

Hi @elevatebart!

I'd really love to use this tool. It looks awesome!

However, I'm also having the "cannot read property default of undefined" issue. I'm using Babel v7 and trying to build the default example "AppButton" you ship in your getting started setup and get the same error. Babel v7 is now shipping with vue-cli by default, so I think supporting it is necessary.

I was able to work around the issue by changing AppButton.vue file to

// fixed
const sizeMixin = require('./sizeMixin');

// broken
import sizeMixin from './sizeMixin';

This makes sense to me because sizeMixin is using module.exports syntax.... not export default syntax.

Can you please provide a timeline for when your PR will be merged? :-)

Thanks.

[elevatebart]

I am desperately waiting for @rafaesc review. Given the popular demand, :) I might very well merge it next Sunday.

@rafaesc if you can review vue-styleguidist/vue-docgen-api#68 please just click on merge. ;)

Bart Ledoux Twitter: @bartledoux Github: @elevatebart

On Jan 14, 2019, at 12:59, Jessica Sachs notifications@github.com wrote:

Hi @elevatebart!

I'd really love to use this tool. It looks awesome!

However, I'm also having the "cannot read property default of undefined" issue. I'm using Babel v7 and trying to build the default example "AppButton" you ship in your getting started setup and get the same error. Babel v7 is now shipping with vue-cli by default, so I think supporting it is necessary.

I was able to work around the issue by changing AppButton.vue file to

// fixed const sizeMixin = require('./sizeMixin');

// broken import sizeMixin from './sizeMixin'; This makes sense to me because sizeMixin is using module.exports syntax.... not export default syntax.

Can you please provide a timeline for when your PR will be merged? :-)

Thanks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[JessicaSachs]

Thanks for the quick response @elevatebart

To my untrained eye, that looks like a massive PR that does a lot of awesome things and happens to solve Babel v7 not being supported...!

Is there a quicker way to expedite only the bug fix?

Cheers, Jess

[elevatebart]

I made a quick & dirty fix in vue-docgen-api 2.6.12. If you install it, it should fix your workflow until we deliver the big 3.0 update.

Bart Ledoux Twitter: @bartledoux Github: @elevatebart

On Jan 15, 2019, at 12:30, Jessica Sachs notifications@github.com wrote:

Thanks for the quick response @elevatebart

To my untrained eye, that looks like a massive PR that does a lot of awesome things and happens to solve Babel v7 not being supported...!

Is there a quicker way to expedite only the bug fix?

Cheers, Jess

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.