Need to explicitly require component in markdown file

[marcel-k]

Hi,

I'm trying out react-styleguide and so far i'm impressed and getting there :)

I'm using typescript (with the react-docgen-typescript package) and webpack 2.

It compiles fine and i can get it to work but I need to explicitly require the component in my Markdown file before I can use it:

export const tileExample = ({ ...props }: Props) => {

    return (
        <div>Hello {props.headingText}</div>
    );
};

const TileExample = require('./tileExample').tileExample;
<TileExample headingText={'World'}></TileExample>

When I check the component that is provided on the window object via chrome console it gives me an es6 module object(?):

Object {__esModule: true, tileExample: function}

Is there some config setting I am missing?

my styleguide.config.js only contains the parser and some section config so i'm omitting it here. Also checked it without TypeScript, same result.

[sapegin]

It worked for me when I did it exactly as shown in react-docgen-typescript readme. One thing I see here (not sure it’s important at all): tileExample is not a component name, it should be CamelCase.

[sapegin]

/cc @pvasek

[pvasek]

@sapegin I don't think so this is typescript related.

This would be same for javascript. But you are right the problem here is that example uses the component TitleExample in markdown file but defines component with the name titleExample. Then, in this case, of course the TitleExample cannot be found. Once the import is used, it's aliasing titleExample as TitleExample and that's the reason why from that moment it's magically working .

[marcel-k]

For our project we have the convention to camelCase the stateless component functions, but either way I get the same result :)

The issue here is that the result generated and provided on the window object is not the function React.CreateClass expects, but some es6module wrapper object.

I can achieve the same result by using the object provided on the window (I am presuming that react-styleguidist is adding the component to the global namespace):

// window.tileExample = {__esModule: true, tileExample: function}
const TileExample = window.tileExample.tileExample;

<TileExample ... />

I think @pvasek is right when he says it is probably a typescript issue and I should dive into my webpack config. I thought maybe this was a known issue so I posted here...

I will shout out when I resurface from diving ;)

[pvasek]

@marcel-k sorry, that was my mistake in previous comment (I removed "so").

I don't think that this is typescript related.

I think the problem is that you have titleExample component but you are trying to use TitleExample. This couldn't work event in the same file.