Comments (22)
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?
from react-styleguidist.
did you try explicitly adding displayName: 'Button'
in your component?
from react-styleguidist.
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?
from react-styleguidist.
yep, this fixes things
from react-styleguidist.
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.
from react-styleguidist.
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.
from react-styleguidist.
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:
- should configuring this be the responsibility of styleguidist (makeWebpackConfig) or the user config?
- maybe we could just throw some meaningful error if we see
ProxyClass
, because this will cause many other problems later (#33), examples will not work, and if this happens, it is most probably caused by a problem withbabel-plugin-react-display-name
. What do you think?
from react-styleguidist.
I didn't see anything about that plugin in the setup or the example project, but maybe I'm missing where its defined.
from react-styleguidist.
- It’s explained here.
- Good idea.
from react-styleguidist.
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
?
from react-styleguidist.
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.
from react-styleguidist.
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
).
from react-styleguidist.
const Button = React.createClass({
and then
export default Button;
at the bottom
from react-styleguidist.
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?
from react-styleguidist.
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:
from react-styleguidist.
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.
from react-styleguidist.
I’ll try to add ["react-transform:after"]
. babel-plugin-react-display-name
is loaded from babel-core
.
from react-styleguidist.
Looks like this will be fixed with the next Babel release. We would just need to update to Babel 6...
from react-styleguidist.
Is there some workaround until its fixed? Except put displayName everywhere..
from react-styleguidist.
Don’t know. Can anyone try to update to Babel 6 and check and/or send PR?
from react-styleguidist.
Please try 2.0.0-rc with Babel 6.
from react-styleguidist.
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.)
from react-styleguidist.
Related Issues (20)
- Issue with editing the markdown
- Module parse failed: Unexpected token (1:0)
- Will PR #1700 be merged into the main branch? HOT 1
- Broken React 17 support in v13.1.0 HOT 4
- ComplexTypeRenderder - ComplexTypeRenderer filename typo
- How to maintain versions ? HOT 1
- Breakage on build with webpack v5
- JSDoc URL is incorrect within documentation HOT 1
- Support ESM for the styleguide.config.js file
- upgrading styleguidist (node:55652) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'getCompilationHooks' of undefined HOT 4
- Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
- Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
- Error: Invalid hook call.
- Webpack 5 does not return compiler object with callback
- The preview doesn't rerenders after error
- Improve footer and add social icons HOT 3
- Installed webpack, babel, styleguidist and ends up throwing error when built HOT 2
- Unknown type undefined HOT 1
- Share styleguidist components between applications
- High vuln in webpack-dev-server/webpack-dev-middleware
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-styleguidist.