-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scope hoisting breaks React component names #8724
Comments
Related: #6092 |
Not doing is a rather big change and not possible without rewriting the packager plugin. |
I’m not sure I would expect Parcel to do anything out of the box for displayName since that’s a React convention. Having an easier way to opt-in could be nice though.
Production builds matter less because those are generally mangled again as part of the application build process. Mangling function names for libraries (in dev mode) is a pretty big developer experience hit for React developers though, since it wipes out library component names in the React DevTools extension. |
What I was trying to say was: Parcel could pretty easily create these But then the problem is (once you've published a library containing these lines) that they will also be included in every production build of webapps using your library. And I'm not sure if |
Yeah, I understood. I still think this is too React-centric to be a default behavior for Parcel:
|
To be clear, the thing I’m reporting is that the current situation is a bad downstream developer experience for React libraries without an obvious workaround. Maybe even just documenting the workaround would be sufficient? |
May be worth summarizing my concern: As someone writing React library code to publish with Parcel, I can't do this because it will result in a bad downstream developer experience: export default function Foo({ bar }: { bar: string }) {
return <div>{bar}</div>;
} And I can't do this: export default function Foo({ bar }: { bar: string }) {
return <div>{bar}</div>;
}
if (process.env.NODE_ENV==="development") {
Foo.displayName = "Foo";
} Because setting the So what I end up having to do is this: (Foo as any).displayName = "PanelResizeHandle"; This works but leaves a |
Boo. |
Bump |
Given source code like so:
Parcel output looks like this:
This kind of "breaks" developer experience for anything that consumes these components, because they won't appear in React DevTools when you search for them by name.
The only way (that I know of) to work around this is to add a
displayName
attribute:Unfortunately this breaks the generated TypeScript types:
I think the only way to work around this is to case the component function before assigning a display name:
This isn't very intuitive though.
The text was updated successfully, but these errors were encountered: