Error Message Improvements #2900
Replies: 2 comments 13 replies
-
|
Have not investigated, but possibly related to #2721 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for all the replies by the way! |
Beta Was this translation helpful? Give feedback.
-
|
Using the named function doesn't work if you want to export a component with the same name. function Example() {
return <p>Hello</p>;
}
// Doesn't work!
export const Example = observer(Example);The second approach works but feels very clunky. const ExampleInner = () => {
return <p>Hello</p>;
};
ExampleInner.displayName = "Example";
export const Example = observer(ExampleInner);A property setter would be much easier and cleaner, and would feel like setting export const Example = observer(() => {
return <p>Hello</p>;
});
Example.displayName = "Example"; |
Beta Was this translation helpful? Give feedback.
-
|
It's PITA, but if you use export const Example = observer(
function Example() {
return <p>Hello</p>;
}
) |
Beta Was this translation helpful? Give feedback.
-
|
I dug through the code a bit and I think I've caught up to where the conversation is at. Let me summarize to see if I understand. The memoized component should be getting its Does that sound right? Sorry for the slowness on my part here. |
Beta Was this translation helpful? Give feedback.
-
|
facebook/react#21392 has merged, so maybe react 17.0.3 will solve this problem. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure if that is possible since React creates that property already
as well IIRC, but feel free to give it a try hiding it with our own, might
be a nice work around for now indeed :)
…On Wed, Apr 28, 2021 at 6:34 PM Landon Schropp ***@***.***> wrote:
Using the named function doesn't work if you want to export a component
with the same name.
function Example() {
return <p>Hello</p>;
}
// Doesn't work!
export const Example = observer(Example);
The second approach works but feels very clunky.
const ExampleInner = () => {
return <p>Hello</p>;
};
ExampleInner.displayName = "Example";
export const Example = observer(ExampleInner);
A property setter would be much easier and cleaner, and would feel like
setting propTypes.
export const Example = observer(() => {
return <p>Hello</p>;
});
Example.displayName = "Example";
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#2900 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAN4NBCIBUYHEDVMDFWPUYDTLBBLNANCNFSM43D2GBWA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
I'll poke around in the code and see what I can come up with. |
Beta Was this translation helpful? Give feedback.
-
Currently, when an error is thrown from an observer HOC, it produces an error message that looks like this:
This is very difficult to debug. Which component didn't return anything from render?
The stack traces also don't contain the name of the component. Here's an example from the error above:
Given the way
observerworks, the only solution I can think of would be to pass an optional name parameter as the first argument.Beta Was this translation helpful? Give feedback.
All reactions