SolidJS•11mo ago

Variable initialized in `onMount` becomes `undefined`

let positionMenu: () => void;

onMount(() => {
  positionMenu = getPositionMenuFun({ inputElement, styles });
  console.log('positionMenu', positionMenu); // always outputs the function
});

createEffect(() => {
  // ...
  positionMenu(); // error: in one scenario `positionMenu` is undefined
});

let positionMenu: () => void;

onMount(() => {
  positionMenu = getPositionMenuFun({ inputElement, styles });
  console.log('positionMenu', positionMenu); // always outputs the function
});

createEffect(() => {
  // ...
  positionMenu(); // error: in one scenario `positionMenu` is undefined
});

I initialize a variable returning a function in the onMount callback, then call it in some effect. In one scenario positionMenu will be undefined. It is nowhere else in the code (only these occurrences of "positionMenu" as shown above). I noticed it's due to a clean up but I do not understand how the variable loses its value.

6 Replies

apollo79•11mo ago

Can you give a reproduction? In the code above, it seems to work so something is probably missing

thetarnav•11mo ago

How do you know if the effects run from top to bottom?

Martnart•11mo ago

Might be too obvious (I guess you have checked that off already) but effects also run before mounting. so it's initially undefined.

thetarnav•11mo ago

onMount is an effect https://github.com/solidjs/solid/blob/f79ba4d9087d74ef7e55fd0dc336c98ce2ec8526/packages/solid/src/reactive/signal.ts#L952

GitHub

solid/packages/solid/src/reactive/signal.ts at f79ba4d9087d74ef7e55...

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

Martnart•11mo ago

I meant that an effect returned from createEffect will execute before onMount Edit: Need to add that I am talking about an SSR context. Might well be not relevant for this particular use-case.

thetarnav•11mo ago

probably the best way to ensure that the effect will have the variable available is to nest the effect insie onMount:

onMount(() => {
  const positionMenu = getPositionMenuFun({ inputElement, styles });

  createEffect(() => {
    positionMenu();
  });
});

onMount(() => {
  const positionMenu = getPositionMenuFun({ inputElement, styles });

  createEffect(() => {
    positionMenu();
  });
});

Gaming

Programming

Variable initialized in `onMount` becomes `undefined`