gh680 Posts - Answer Overflow

gh680

•Created by gh680 on 6/20/2023 in #support

Disappearing button text?

I have a Button component whose text disappears - it initially renders, then goes away. The text node itself is gone from the DOM. Can't understand what's happening. Repo #1 is a UI library package. It has a Button component:

import { JSX } from 'solid-js'

interface ButtonProps {
    children?: JSX.Element
    onClick: () => void
}

export default function Button(props: ButtonProps) {
    return (
        <button type="button" onClick={() => props.onClick()}>
            {props.children}
        </button>
    )
}

import { JSX } from 'solid-js'

interface ButtonProps {
    children?: JSX.Element
    onClick: () => void
}

export default function Button(props: ButtonProps) {
    return (
        <button type="button" onClick={() => props.onClick()}>
            {props.children}
        </button>
    )
}

In repo #2, I import the Button for a login page:

import { Show } from 'solid-js'
import { Button } from '@some-scope/other-package'
import { login } from '~/auth/auth'
import { useSession } from '~/auth/session'
import Layout from '~/layout/Layout'
import styles from './Landing.module.scss'

export default function Landing() {
    const session = useSession()
    const user = () => session()?.user

    return (
        <>
            <Show
                when={user()}
                fallback={
                    <div class={styles.page}>
                        <Button onClick={() => login()}>
                            disappearing login button
                        </Button>
                    </div>
                }
            >
                <Layout />
            </Show>
        </>
    )
}

import { Show } from 'solid-js'
import { Button } from '@some-scope/other-package'
import { login } from '~/auth/auth'
import { useSession } from '~/auth/session'
import Layout from '~/layout/Layout'
import styles from './Landing.module.scss'

export default function Landing() {
    const session = useSession()
    const user = () => session()?.user

    return (
        <>
            <Show
                when={user()}
                fallback={
                    <div class={styles.page}>
                        <Button onClick={() => login()}>
                            disappearing login button
                        </Button>
                    </div>
                }
            >
                <Layout />
            </Show>
        </>
    )
}

Anything jump out at anybody? I think I've seen this before, where testing a UI component in the same repo is fine, but when imported for use in another project, I've seen text nodes get yeeted. Thanks for taking a look.

8 replies

SSolidJS

•Created by gh680 on 5/12/2023 in #support

Can't get createServerData$ to work as expected

I have other projects that use routeData / createServerData$ / useRouteData that work fine. This one is giving me fits. In the below, trying to read the records() accessor gives me "records is not a function"

import { For } from 'solid-js'
import { createServerData$ } from 'solid-start/server'
import { useRouteData } from 'solid-start'
import prisma from '~/db/prisma'

export function routeData() {
    return createServerData$(async () => {
        const data = await prisma.company.findMany({})
        return data
    })
}

export default function TableView() {
    const records = useRouteData<typeof routeData>()

    return (
        <div>
            <For each={records()}>{rec => <p>{rec.name}</p>}</For>
        </div>
    )
}

import { For } from 'solid-js'
import { createServerData$ } from 'solid-start/server'
import { useRouteData } from 'solid-start'
import prisma from '~/db/prisma'

export function routeData() {
    return createServerData$(async () => {
        const data = await prisma.company.findMany({})
        return data
    })
}

export default function TableView() {
    const records = useRouteData<typeof routeData>()

    return (
        <div>
            <For each={records()}>{rec => <p>{rec.name}</p>}</For>
        </div>
    )
}

My prisma schema/client are cool, typings there are good. I've reduced the code to a minimal example and it still doesn't work. I've tried everything I know, and still no joy. Ideas anyone? Thanks

8 replies

Gaming

Programming