Cannot read property 'name' of undefined

[Moonhint]

Issue:

Which version are you using? 1.0.3

Are you using storybook-router with a react based project or a vue one? with vue

Please describe the problem:

After add this to my story, I found this Cannot read property 'name' of undefined error.

Please explain how to reproduce the issue or (better) provide an example to do it.

Here how I add it:

[jackkoppa]

Seeing the same issue; initial appearances are that it's the interaction of this addon with storybook-addon-vue-info

Here's my relevant package.json:

"storybook-addon-vue-info": "^1.1.1",
"storybook-vue-router": "^1.0.3",

Most importantly, in my component, when I remove the use of vue-info, the component loads. When I have both vue-info and vue-router addons, I see the same failure message as @Moonhint. When I use only vue-info and not vue-router in a story, I don't get the error message, but then I get a failure when I try to use a <router-link>

Investigating, but not certain I'm gonna get anywhere in terms of a fix... 🤔

[ThePeach]

experiencing exactly the same problem reported by @jackkoppa . At the moment I'm resigned to avoid using the info addon where I need the router, but it's definitely something related to the interaction with each one.

[jackkoppa]

Hi @ThePeach, @Moonhint - I thought I responded earlier here.

I have a decent solution, after some experimenting: move storybook-vue-router to be global, loaded after storybook-addon-vue-info. It will be available on all stories now, and you won't be able to setup real routes to test dummy components with, since that has to happen in each story (at least I haven't discovered how).

But, it does mean that you can use this addon, with the router addon, and your stories will function well.

So:

1. Remove any reference to storybook-vue-router in individual stories
2. Setup your .storybook/config.js to look roughly like this:

import { configure, addDecorator } from '@storybook/vue'

// begin important part 
import { withInfo } from 'storybook-addon-vue-info';
import withRouter from 'storybook-vue-router'

addDecorator(withInfo)
addDecorator(withRouter())
// end important part

function loadStories() {
	// Dynamically requires any .js file inside of the
	// stories directory
	const stories = require.context('../src/stories/', false, /\.js$/)
	stories.keys().forEach(stories)
}

configure(loadStories, module)

3. Then, in each story, you just enable this vue-info addon by passing in an info object at the end, the way you may already be doing:

stories.add(
	'Some story name',
	() => {
        // Implement the story
	},
	{
		info: { summary: 'My sample summary' }
	}
)

[ThePeach]

@jackkoppa thanks for the clarification! loading the router after info works, odd behaviour perhaps but this seems to fix it and make them work together.

🙇 🎉 👍