SolidJS•3mo ago

Type '() => JSX.Element' is not assignable to type 'Element'

I'm in the process of upgrading some code I wrote 2 years ago. I have many instances of the following pattern in my codebase, where I've embedded logic (of various types) directly within the JSX output. Typescript is now complaining that Type '() => JSX.Element' is not assignable to type 'Element'. The code continues to work fine, but the TS error really bugs me! What's the solution? I want to minimise the amount of code re-working necessary because it affects so many files. But I also want to maintain the reactivity.

import type { Component } from "solid-js";
import { createSignal } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                {() => {
                    if (loading()) {
                        return <p>Loading...</p>;
                    } else {
                        return <p>Some content</p>;
                    }
                }}
            </div>
        </div>
    );
};

import type { Component } from "solid-js";
import { createSignal } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                {() => {
                    if (loading()) {
                        return <p>Loading...</p>;
                    } else {
                        return <p>Some content</p>;
                    }
                }}
            </div>
        </div>
    );
};

5 Replies

Madaxen86•3mo ago

You should probably check out the Show component and refactor the conditional rendering part. https://docs.solidjs.com/reference/components/show#lessshowgreater The error comes from the function inside the div which is not called.

col16OP•3mo ago

Okay. so I guess the equivalent would be

import type { Component } from "solid-js";
import { createSignal, Show } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                <Show when={loading()} fallback={<p>Some content</p>}>
                <p>Loading...</p>;
                </Show>
            </div>
        </div>
    );
};

import type { Component } from "solid-js";
import { createSignal, Show } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                <Show when={loading()} fallback={<p>Some content</p>}>
                <p>Loading...</p>;
                </Show>
            </div>
        </div>
    );
};

Madaxen86•3mo ago

Looks solid 😜 Although „… loading“ should be your fallback right?

col16OP•3mo ago

yep, true! oops.

ryansolid•3mo ago

For more info read the section about stricter JSX elements: https://github.com/solidjs/solid/releases/tag/v1.7.0

GitHub

Release v1.7.0 - U Can't Type This · solidjs/solid

Solid has experienced incredible growth in usage the past 6 months. Companies are using it to power production applications and SolidStart Beta has been a big part of that. As a natural part of thi...

Gaming

Programming

Type '() => JSX.Element' is not assignable to type 'Element'