SolidJS•2y ago

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.

4 Replies

mdynnl•2y ago

anything we can look at apart from the code snippets? something we can pause and step through the debugger.

gh680OP•2y ago

Hey @mdynnl, yes. I created stripped down repos that demonstrate the issue: https://github.com/greg-hammond/ui-comp-test.git exports a Button component, and has an npm package on github. https://github.com/greg-hammond/button-consumer-test.git is a test project that imports Button from that package. If you clone the test project, pnpm install, pnpm dev, and browse to :3102, you will see the problem occur. If you build that project and run from /dist (pnpm build / pnpm start), the problem does not occur. (And: if I have the ui-comp-test repo open, and dev link the package, the problem also does not occur). If you're able to take a look, that would be great. Thank you!

mdynnl•2y ago

so the problem is in ui-comp-test, bundling/exports isn't correctly set up for authoring libraries, https://github.com/solidjs-community/rollup-preset-solid is recommended over vite, the readme has instructions and info about it solid being a compiled framework, sources need to be shipped so that they can be compiled alongside the user code authoring side needs to setup up conditional exports with solid condition so that it can be consumed from consuming side, vite-plugin-solid already handles that

gh680OP•2y ago

I gave this a try and it didn't seem to do anything differently. Are there other vite or solid config changes needed that aren't explicitly listed here? The readme seemed to suggest that I'd be prompted for a bunch of package.json settings, but never was. I tried to manually set those, but I never saw the /dist output look like what was suggested. These are probably all really dumb questions, I just have no experience with build config or rollup. Any easy suggestions for me?

Gaming

Programming

Disappearing button text?