A suggestion to improve documentation a bit

[ilya-pyatin]

Hello:

I am new to styleguidist, yesterday tried to use it on the project I am currently working on. And I had an issue which I resolved for some time. The issue is that I added an example of a component in a Readme.md like it is suggested, and I had the following error displayed instead of the example:

"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of PreviewComponent."

It was not clear for me why the error appeared. I've tried some ideas like changing Webpack version to 3, but in the end it appeared that the issue was that my component was exported not as a default. So it was like this:

export class Component ...

and changing it to this solved the issue:

export default class Component ...

So my suggestion is to mention this detail in the documentation. The detail that Readme.md expects a component be exported as default.

Thank you

[sapegin]

Feel free to send a pull request ;-)

[ilya-pyatin]

Actually I'm not sure if it is required that a component is exported as default.

There are a lot of components on my project that are exported not as default so it would be great if there was a way to keep them as is and be able to write examples.

So far I haven't found such way in the docs. I have searched the source code and have found that there is a switch in the Examples component with case 'code' and case 'markdown', so I would assume that there is an alternative way of specifying an example apart from creating an .md file. But again, I have not found any description of the way in the docs.

Unfortunately I don't have much time to search the source code to find an answer myself, so I would appreciate any help with this.

And again, if there is an alternative way of specifying component examples, it would be great to have it documented.

Thanks

[sapegin]

Actually I'm not sure if it is required that a component is exported as default.
it would be great if there was a way to keep them as is and be able to write examples.

According to the code it may work, but this code needs more tests and comments:

react-styleguidist/src/utils/utils.js

Lines 23 to 36 in e0f576d

	/**
	* Expose component as global variables.
	*
	* @param {Object} component
	*/
	export function globalizeComponent(component) {
	if (!component.name) {
	return;
	}
	global[component.name] =
	!component.props.path || component.props.path === 'default'
	? component.module.default || component.module
	: component.module[component.props.path];

Feel free to improve that.

So far I haven't found such way in the docs. I have searched the source code and have found that there is a switch in the Examples component with case 'code' and case 'markdown', so I would assume that there is an alternative way of specifying an example apart from creating an .md file.

Not sure how you’ve come to this conclusion ;-) code and markdown here are parts of your Markdown file that should be rendered as interactive example or static text.

And again, if there is an alternative way of specifying component examples, it would be great to have it documented.

Looks like you’re mixing two things here: exporting components and specifying examples. Please create a separate issue for the latter issue (it looks very similar to #621).