SolidJS•10mo ago

Uninitialized signal in JSX but initialized in component

I have a component that is using an xstate machine to handle some state. At the top of the component I initialize the machine and set up a signal to handle the state, and then reference it in the JSX I return. The signal is initialized and works fine in the component body but is undefined in the JSX:

export const Authentication: Component = () => {
  const fsm = createActor(machine);
  const [getState, setState] = createSignal<State>(fsm.getSnapshot());

  // Works fine here...
  console.log("State", getState()); 

  fsm.subscribe((state) => {setState(state);});
  
  onMount(() => {fsm.start();});
  onCleanup(() => {fsm.stop();});

  // Fails in the Match component at runtime with the error:
  // Uncaught ReferenceError: getState is not defined
  return (
    <Page>
      <Switch>
        <Match when={getState().matches("Checking local storage")}>
          <Heading>Checking local storage...</Heading>
        </Match>
      </Switch>
     </Page>
  );
}

export const Authentication: Component = () => {
  const fsm = createActor(machine);
  const [getState, setState] = createSignal<State>(fsm.getSnapshot());

  // Works fine here...
  console.log("State", getState()); 

  fsm.subscribe((state) => {setState(state);});
  
  onMount(() => {fsm.start();});
  onCleanup(() => {fsm.stop();});

  // Fails in the Match component at runtime with the error:
  // Uncaught ReferenceError: getState is not defined
  return (
    <Page>
      <Switch>
        <Match when={getState().matches("Checking local storage")}>
          <Heading>Checking local storage...</Heading>
        </Match>
      </Switch>
     </Page>
  );
}

I'm new to Solid so I may be missing something about how components work, but the block at the top should execute before the return statement right? Is Solid doing some compiler magic that I'm not aware of? Dumb mistake elsewhere that I'm too undercaffeinated to see? P.S. - This is being built with Vite and the Solid plugin. P.P.S. - This seems to only happen with Match or Show. If I use one of my own components I can access getState just fine (e.g. <Heading>{getState().value}</Heading> works fine)

5 Replies

GhirigoroOP•10mo ago

Turns out it's a bug with the SolidJS plugin for Vite. NOthing to see here....

foolswisdom•10mo ago

Would you mind linking the issue (or discord message, if it's been discussed here)

GhirigoroOP•10mo ago

@foolswisdom Sure. Here it is: https://github.com/solidjs/vite-plugin-solid/issues/146

GitHub

Unable to pass signal to child components · Issue #146 · solidjs/vi...

Describe the bug When signal is passed to a child component, an error is thrown: Uncaught ReferenceError: props is not defined, even though props contains other static properties. Printing props in...

foolswisdom•10mo ago

Thanks I didn't realize we had such a big bug

GhirigoroOP•10mo ago

Apparently it's fixed in the latest version (or rather it seems like some things were rolled back in the latest version)

Gaming

Programming

Uninitialized signal in JSX but initialized in component