ReferenceError: Can't find variable from example (problem with component displayName, "ProxyClass" is used)

[chrisdrackett]

I'm trying to get up and running and I think I'm getting pretty close. However I'm having an issue with my first component. I'm using a file called Button.jsx that has a const Button = React.createClass({ and export default Button; at the bottom. I have styleguidist setup like so:

rootDir: './src',
components: './components/**/*.jsx',
skipComponentsWithoutExample: true,
getExampleFilename: function(componentpath) {
    return componentpath.replace(/\.jsx?$/, '.examples.md');
}

when I view the style guide I see ProxyClass where I would expect Button then in my example I get:

ReferenceError: Can't find variable: Button

all the docs from the file are fine and the example code is there and looking ok, just no preview or component name.

[chrisdrackett]

also strange, I just added a second component (by adding an example for it) but I don't see it in the listing even after restarting the server. I wonder if it also is coming in as ProxyClass so I'm only seeing one thing in the style guide?

[mik01aj]

did you try explicitly adding displayName: 'Button' in your component?

[chrisdrackett]

nope, I'll give that a try. I didn't see that in the examples, but not sure what I'm doing differently. Does it work in the examples because components are in folders?

[chrisdrackett]

yep, this fixes things

[mik01aj]

I don't know what exactly you do differently, but if you see ProxyClass this means that there is some problem with figuring out the name of your component. And if I'm right, the workaround with displayName: 'Button' should work. AFAIK file names have currently nothing to do with it (maybe they should, btw).

Still note that what I'm saying is only a workaround and we should still fix the underlying bug or at least provide some friendly error message.

[chrisdrackett]

no worries! I'm happy to help debug where I can. I'm primarily a designer so my javascript knowledge isn't as deep as it could be.

[mik01aj]

okay, so if adding displayName helps, then you should check your babel settings, in particular check whether you have babel-plugin-react-display-name properly configured.

@sapegin, 2 things:

1. should configuring this be the responsibility of styleguidist (makeWebpackConfig) or the user config?
2. maybe we could just throw some meaningful error if we see ProxyClass, because this will cause many other problems later (Bad things happen when there are multiple components with the same name #33), examples will not work, and if this happens, it is most probably caused by a problem with babel-plugin-react-display-name. What do you think?

[chrisdrackett]

I didn't see anything about that plugin in the setup or the example project, but maybe I'm missing where its defined.

[sapegin]

1. It’s explained here.
2. Good idea.

[mik01aj]

2: So let's do it! Do you think it's better to try to detect the name (like I did someday), or to throw an Error?

[chrisdrackett]

so I'm guessing that my error is that I'm using an older version of babel? I'll try updating and see if that helps.

[mik01aj]

No, I don't think so. And styleguidist is using the old (5) version anyway.

Could you post your class definition? (I mean the lines around React.createClass or class ... extends Component).

[chrisdrackett]

const Button = React.createClass({

and then

export default Button; at the bottom

[mik01aj]

Hmm, so, as you can see in the Babel REPL, this should add the displayName. Maybe you could check if the displayName is really added in your webpack output?

[chrisdrackett]

so when I build the styleguide I see display names:

Button=_react2["default"].createClass({displayName:"Button"

but when running npm run styleguide-server I get the following for Button (from the top of the component):

ProxyClass
components/Button.jsx

and from the console:

var Button = _wrapComponent('_$Unknown')(_react2['default'].createClass({\n\n  propTypes:

[mik01aj]

I think I got it. It's gaearon/babel-plugin-react-transform#19...

And I was able to reproduce this with a simple example using React.createClass as you did.

The above ticket has this info:

Actually, this is resolved if I include the display-name plugin before react-transform plugin.

Yes, this is the intended usage. (...)

@sapegin, could you check that this is true for the webpack config? I don't understand how exactly these plugins are loaded.

[sapegin]

I’ll try to add ["react-transform:after"]. babel-plugin-react-display-name is loaded from babel-core.

[mik01aj]

Looks like this will be fixed with the next Babel release. We would just need to update to Babel 6...

[jardakotesovec]

Is there some workaround until its fixed? Except put displayName everywhere..

[sapegin]

Don’t know. Can anyone try to update to Babel 6 and check and/or send PR?

[sapegin]

Please try 2.0.0-rc with Babel 6.

[sapegin]

Feel free to reopen if you still have this issue.

(2.0.0-rc4) also have a fallback to file name or folder name if it can’t detect component name in runtime.)