-
Notifications
You must be signed in to change notification settings - Fork 373
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
[Bug?]: Ref is undefined when component has a loading resource #1273
Comments
Have you tried using signals for refs instead of a plain variable? |
Probably doable. I would then have a Element | undefined type because of no initial value as input, but that would be more strict and better to work with. But is there a specific reason why they use plain let vars in the solidjs docs? |
Ah, when I use a signal, the value is or should be treated as an readonly value, right? As long as I use it as a proxy I could do it like this: const [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
createEffect(() => {
const ref = timezoneRef()
if (!ref) return
ref.value = timezone();
});
return <input ref={(e) => setTimezoneRef(e)} />; It does work like this. But is it intended this way within an async component? If yes, it would be nice if there would be a note in the docs. |
Reference for this issue: https://git.moonleay.net/Websites/liljudd-website/commits/branch/ref-resource-bug |
Duplicates
Latest version
Current behavior 😯
When I load the page I get a Ref is undefined error in a
createEffect
when assigning the value property. It seems to be because the component is still loading because of a createResource which has not finished, why there hasn't been anything rendered yet.Expected behavior 🤔
Not throwing the error.
I am not sure how the workflow should be in such a case. I would guess wrapping the HTML elements which use the resource payload so other elements who have refs assigned can render, but Suspense only works for components and not in the same file if I read correctly.
Steps to reproduce 🕹
Steps:
Having a ref in a component and a createResource which takes some time to load. Accessing the ref too early will result in the undefined error.
Context 🔦
I removed everything unnecessary from the project and pushed a separate branch
ref-resource-bug
. I also wonder why the effect is executing so early. The reason for running in the first place is being theIntl
object not being the same with SSR, right? Like server and client having different preferences, which makes it fine running the effect, but if I would check firstif (!timePlanningRef) return;
then I would not insert the default timezone for the user and would also not have a rerun of the effect until the user inputs anything and might wonder of the mismatched place holder value coming from the server.I also had many other issues like Hydration mismatches and sourceMaps being null, if I would have elements accessing the resources I would have the errors, but also not every time, depending how fast the resource resolved. But I could be sure of the ref error and just added a 3 sec delay as a showcase. I might open another issue when I have more clear results of the cause of the other errors, but one step at the time.
Your environment 🌎
The text was updated successfully, but these errors were encountered: