Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using @displayName breaks automatic component import

See original GitHub issue

Current behavior

After adding an @displayName jsdoc item to the comment it successfully uses the provided name in the left menu as I would expect.

It also uses that new name in the component import code (I think). This causes “component undefined” errors in the console and none of the demo’s on that page load correctly.

To reproduce

Add @displayName to a component that doesn’t match the components existing name.

Expected behavior

The left menu text to update and all other functionality to remain the same.

Issue Analytics

State:
Created 4 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

elevatebartcommented, Nov 11, 2020

Thank you @rfrey-imb I think you just put your finger on the reason this issue is not closed yet.

1reaction

elevatebartcommented, May 26, 2020

@T0RAT0RA that’s awesome!

Would you be open to documenting it in the cookbook? It would probably help anybody find the answer they seek.

If you are, fork the project, open the Cookbook.md file and add this story to the end. You can use the question: “How to use a different name for components in the sidebar and in examples?”

or whatever you feel like.

Thank you much!

Bart

[EDIT]

Here is the link to the cookbook: https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/docs/docs/Cookbook.md

Top Results From Across the Web

displayName not working, component appearing twice story ...

Component tag names are appearing twice and ignoring displayName settings. I've set displayName to 'TestButton', and the local story source ...

Forwarding Refs - React

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary...

Tooling - styled-components

It also allows you to see the component's displayName in React DevTools. For example, consider writing a styled component that renders a button...

Top 5 @material-ui/utils Code Examples - Snyk

(!name) { // Provide a better DX outside production. const displayName = getDisplayName(Component); if (displayName !== undefined) { classNamePrefix = displayName ...

React integration - MobX

using React context. Observables can be passed into components as props (as in the example above): import { observer } from "mobx-react-lite"