Skip to content

Common issues

The component is not in a Partas.Solid namespace

The plugin only treats types whose full name starts with Partas.Solid as tags and components. A [<SolidTypeComponent>] declared anywhere else gets a warning and is not transformed, and a custom tag type is not emitted as a JSX tag.

// Works
namespace Partas.Solid.MyApp

// Is not picked up
namespace MyApp

A function child without yield

Components such as For, Repeat, Show.Keyed and Show.NonKeyed take a function as their child. You must yield it:

// Wrong: the function is not passed to For
For.Keyed(each = [| "1"; "2" |]) {
    fun item index -> li () { item }
}

// Right
For.Keyed(each = [| "1"; "2" |]) {
    yield fun item index -> li () { item }
}

If your IDE cannot infer the types of item and index, the yield is probably missing.

Nothing updates when a signal changes

A signal read in the component body is read once, because the body runs once. Read it inside the JSX to keep it live:

[<SolidComponent>]
let ReadOnce () =
    let count, setCount = createSignal 0
    let readInBody = count ()

    div () {
        button (onClick = fun _ -> setCount (count () + 1)) { "Add one" }
        p () { $"Read in the body: {readInBody}" }
        p () { $"Read in the JSX: {count ()}" }
    }
export function ReadOnce() {
    const patternInput = createSignal(0);
    const count = patternInput[0];
    const readInBody = count() | 0;
    return <div>
        <button onClick={(_arg) => {
                patternInput[1](count() + 1);
            }}>
            Add one
        </button>
        <p>
            {`Read in the body: ${readInBody}`}
        </p>
        <p>
            {`Read in the JSX: ${count()}`}
        </p>
    </div>;
}

See Building the DOM.

Store items in a number array do not update

Compile with --typedArrays false. Without it, [| 1; 2; 3 |] is an Int32Array, which stores do not make reactive. See Compiling.

The output looks wrong in Debug

The plugin expects the Release AST. Always pass -c Release to Fable, including under dotnet fable watch.

Attr.Dir or another Attr member is not defined

open Fable.Core.TS.Dom brings in DOM's Attr type, which hides Partas.Solid's Attr module. Open Fable.Core.TS instead and write Dom.HTMLElement.

Children of a <template>

Solid 2's development build rejects any JSX child of <template> with "The HTML provided is malformed", because its template check cannot see template contents. Set the content with innerHTML instead.

Output that is silently missing

If the plugin drops part of a component, compile that component with ComponentFlag.PrintDisposals to log every expression it discards, or ComponentFlag.DebugMode to dump the AST it received:

[<SolidComponent(ComponentFlag.VerboseDebugMode)>]
let Broken () = ...

Include that output when you submit an issue. See attribute flags for the other flags.

Edit this page