Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'name' of undefined #33

Open
Moonhint opened this issue Apr 11, 2019 · 4 comments
Open

Cannot read property 'name' of undefined #33

Moonhint opened this issue Apr 11, 2019 · 4 comments

Comments

@Moonhint
Copy link

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:

Screenshot from 2019-04-11 13-36-54
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:
Screenshot from 2019-04-11 13-37-08

@jackkoppa
Copy link

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
Copy link

ThePeach commented May 9, 2019

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
Copy link

jackkoppa commented May 15, 2019

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)
  1. 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
Copy link

ThePeach commented Jun 3, 2019

@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.

🙇 🎉 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants