S
SolidJS8mo ago
coz

What is JSX's hoisting behavior?

My code runs now but I wonder what's going on 🙂 if I place
const a = Test;
function Test() {}
console.log(a);
const a = Test;
function Test() {}
console.log(a);
inside a .jsx that is outside a function, undefined will be printed. However if I place it inside a function that is called with render the function will be printed. So what is the hoisting behavior under JSX?
6 Replies
lxsmnsyc
lxsmnsyc8mo ago
Where are you testing this specifically
coz
coz8mo ago
My computer. However you can reproduce it on the JavaScript starter given at the beginner tutorial on https://stackblitz.com/github/solidjs/templates/tree/master/js
StackBlitz
Solidjs - Templates - StackBlitz
Vite + solid templates
lxsmnsyc
lxsmnsyc8mo ago
ahh, it's a bit different when it comes to dev mode, thanks to HMR. This is unlikely to be fixed, unfortunately Longer explanation: HMR replaces every function declaration with variable declaration. Hoisting should still work for inner references however for top-level, this produces "undefined" because you're trying to access a variable that is yet to be declared (function declaration behaves too differently). The reason it's a "wont fix" is because there's no way to effectively re-assign a function declaration in-place while conditionally maintaining its reference
coz
coz8mo ago
Isn't HMR happening only on reload? If I bring down the server and start it over, and trigger a full reload in the browser with Ctrl + F5 it still happens on the first load It happens with JSX but not JS
lxsmnsyc
lxsmnsyc8mo ago
No I'm talking about the compilation for HMR to work with SolidJS. Also, HMR doesn't happen on "reload". HMR and reload are two separate things
coz
coz8mo ago
Oooh Thanks for the info
Want results from more Discord servers?
Add your server
More Posts