Skip to content
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

Closed
2 tasks done
aronmal opened this issue Jan 20, 2024 · 5 comments
Closed
2 tasks done

[Bug?]: Ref is undefined when component has a loading resource #1273

aronmal opened this issue Jan 20, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@aronmal
Copy link
Contributor

aronmal commented Jan 20, 2024

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the 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:

git clone  https://git.moonleay.net/Websites/liljudd-website.git
cd liljudd-website/
git checkout ref-resource-bug
pnpm i
pnpm dev
  1. Open http://localhost:3000/config/598539452343648256 in your browser

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 the Intl 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 first if (!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 🌎

System:
  OS: Linux pop-os 6.5.6-76060506-generic #202310061235~1697396945~22.04~9283e32 SMP PREEMPT_DYNAMIC Sun O x86_64 x86_64 x86_64 GNU/Linux
  CPU: (8c/16t) x86_64
Binaries:
  Node: v21.1.0 - /home/aronmal/.nvm/versions/node/v21.1.0/bin/node
  Yarn: 1.22.21 - /home/aronmal/.nvm/versions/node/v21.1.0/bin/yarn
  npm: 10.2.0 - /home/aronmal/.nvm/versions/node/v21.1.0/bin/npm
  pnpm: 8.14.1 - /home/aronmal/.nvm/versions/node/v21.1.0/bin/pnpm (my preference)
npmPackages:
├── @auth/[email protected]
├── @auth/[email protected]
├── @auth/[email protected]
├── @eslint-community/[email protected] extraneous
├── @eslint-community/[email protected] extraneous
├── @eslint/[email protected] extraneous
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected] extraneous
├── @typescript-eslint/[email protected] extraneous
├── @typescript-eslint/[email protected] extraneous
├── @typescript-eslint/[email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
@aronmal aronmal added the bug Something isn't working label Jan 20, 2024
@aronmal
Copy link
Contributor Author

aronmal commented Jan 20, 2024

Here is the error:
Screenshot from 2024-01-20 17-46-13

@lxsmnsyc
Copy link
Member

Have you tried using signals for refs instead of a plain variable?

@aronmal
Copy link
Contributor Author

aronmal commented Jan 20, 2024

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?

@aronmal
Copy link
Contributor Author

aronmal commented Jan 20, 2024

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.

@aronmal aronmal closed this as completed Jan 20, 2024
@aronmal
Copy link
Contributor Author

aronmal commented Jan 20, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants