Skip to content

[html] failure to initially run effect #2580

@trusktr

Description

@trusktr

Describe the bug

In some cases, Solid will mysteriously not run effects (not even the initial first run).

Your Example Website or App

https://playground.solidjs.com/anonymous/fdbfd2dd-56ee-49cb-b77e-a615cb8af653

Steps to Reproduce the Bug or Issue

  1. write a template with a function as a child in text content
  2. read and write a signal in a specific location in the template
  3. observe that effect made with createEffect doesn't run, not even initially

Example code:

import { createEffect, createSignal } from "solid-js"
import html from "solid-js/html"
import { render } from "solid-js/web"

export class DrippyScene extends HTMLElement {
  connectedCallback() {
    console.log("connectedCallback")

    // This never logs:
    createEffect(() => console.log(" ####################### EFFECT!"))
  }
}

customElements.define("drippy-scene", DrippyScene)

const [isDesktop, setIsDesktop] = createSignal(false)

render(
  () => html`
    <drippy-scene></drippy-scene>

    ${() => {
      if (!isDesktop()) setIsDesktop(true)
      return ""
    }}

    <div></div>
  `,
  document.querySelector("#app")!,
)

/*

Things you can do to make the effect run:

- comment out the line with if (!isDesktop())

*/

Expected behavior

Expect effects to always run at least once initially.

Ways to make the effect run:

  • comment out the line with if (!isDesktop)
  • or delete the text content interpolation entirely

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Chrome
  • Version: 144

Additional context

Here are a few different ways to make it happen:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions