solidjs / solidjs/solid-docs

Signal update not causing re-render

Open
#1,009 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue help wanted
Dominant language
MDX
Stars
292
Forks
361
Avg merge
7h 51m
Merged PRs (30d)
1

Description

Describe the bug

This may be a me problem, but I am confused and imagine this is well above my understanding. I'm having trouble with a simple re-render when an onMount function changes a signal from false to true--in this case, used to signify that loading has finished. I have tinkered with a few things trying to get this app to work. It's a template using Colyseus + Phaser for a multiplayer server. I've added Solid JS to the front-end as per a previous, functioning app, and that's where all the trouble began!

This template is using parcel to bundle, and I've tried to maintain that, but it has been tricky integrating Solid. I've had to create
.babelrc file,
parcel.config.js file,
and update the tsconfig to
"jsx": "preserve",
"jsxImportSource": "solid-js/h" (in order to get it to stop screaming at me about a jsx-dev-runtime error)

In doing so, I've finally been able to get it to accept using Solid js, but now it's simply not rendering a signal change in the return's body.

Your Example Website or App

https://achreo.vercel.app

Steps to Reproduce the Bug or Issue
export default function App() {
    const [menu, setMenu] = createSignal<boolean>(false);
    onMount(() => {
        console.log(menu(), 'Current Menu');
        setMenu(true);
        console.log(menu(), 'Current Menu');
    });
    return (
        <div id="app">
            <Show when={menu()} fallback={<Puff color="gold"/>}>
                <div class='superCenter'>
                    <div>The Ascean</div>
                    <button>Enter Game</button>
                </div>
            </Show>
        </div>
    );
};

This is the smallest version of getting at what I'm talking about, it's simply not updating its render of the signal and reflecting that in the return.

the app above shows how it functions when it does work (this is a front-end only, single player version of the same concept I'm redesigning to incorporate a server for multiplayer)

Expected behavior

I expected it to update the rendering, but instead it remains stuck with it seeing the fallback of the Show component, a Puff from solid-spinner

Screenshots or Videos

https://github.com/user-attachments/assets/23b0900f-fdfc-4631-b6fb-70ab219a7558

Platform
  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]
Additional context

Apologies if this is a known issue, I've been trying to get this to work for a couple days now and after running into multiple, fixable errors, this seems like one that's just above my head.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the App function and its createSignal, onMount, and Show usage, then inspect the mentioned .babelrc, parcel.config.js, and tsconfig settings. Reproduce the minimal example and compare the Solid integration with the linked working app; done means identifying why the signal change does not update the rendered branch.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.