SolidJS•2y ago

Random errors on previously working project

I have attached a screenshot of my inspect tool. This project worked perfectly yesterday and i have done nothing to change the code. I have no idea what is going on - but the error seems to be coming from solidJS itself. What should i do? I am using SolidStart

15 Replies

DaOfficialWizard🧙•2y ago

okay, i have worked out the error to a specific section of my code - it is my code that is causing the error. Odd that it worked yesterday I am not sure exactly why this error is happening. This is te code

<For each={keyMembers}>
    {(member, index) => {
        return (
            <div data-index={index()} class="flex flex-row m-1">
                <Card
                    //src={`/images/avatars/${member.name}.jpg`}
                    src="https://bit.ly/3TJwRZR"
                    title={member.name}
                    subTitle={member.role}
                    imageAlt={member.name}
                    background="bg-gradient-to-r from-violet-400 to-indigo-600"
                    backgroundColor={member.backgroundColor}
                    children={member.bio}
                    buttonElement={() => <Socials member={member} />}
                />
            </div>
        )
    }}
</For>

<For each={keyMembers}>
    {(member, index) => {
        return (
            <div data-index={index()} class="flex flex-row m-1">
                <Card
                    //src={`/images/avatars/${member.name}.jpg`}
                    src="https://bit.ly/3TJwRZR"
                    title={member.name}
                    subTitle={member.role}
                    imageAlt={member.name}
                    background="bg-gradient-to-r from-violet-400 to-indigo-600"
                    backgroundColor={member.backgroundColor}
                    children={member.bio}
                    buttonElement={() => <Socials member={member} />}
                />
            </div>
        )
    }}
</For>

I have worked it out to a specific prop - it is the buttonElement prop. If i comment that out - the error goes away. This is how i use the prop in the Card component

<Show when={props.buttonElement !== undefined || null}>{props.buttonElement}</Show>

<Show when={props.buttonElement !== undefined || null}>{props.buttonElement}</Show>

Pretty stumped as to whats happening. This is the Social component

const Socials: Component<ISocial> = (props) => {
    return (
        <Flex flexDirection="row" justifyContent="space-around" width="full" maxWidth={96}>
            <For each={props.member.socials}>
                {(social, index) => {
                    return (
                        <a data-index={index()} href={social.link} target="_blank">
                            <IconButton
                                size="xs"
                                aria-label="social"
                                variant="plain"
                                colorScheme="primary">
                                {social.icon}
                            </IconButton>
                        </a>
                    )
                }}
            </For>
        </Flex>
    )
}

const Socials: Component<ISocial> = (props) => {
    return (
        <Flex flexDirection="row" justifyContent="space-around" width="full" maxWidth={96}>
            <For each={props.member.socials}>
                {(social, index) => {
                    return (
                        <a data-index={index()} href={social.link} target="_blank">
                            <IconButton
                                size="xs"
                                aria-label="social"
                                variant="plain"
                                colorScheme="primary">
                                {social.icon}
                            </IconButton>
                        </a>
                    )
                }}
            </For>
        </Flex>
    )
}

These are the interfaces:

interface ISocial {
    member: IKeyMembers
}

export interface IKeyMemberSocials {
    name: string
    icon: () => JSXElement
    link: string
}

export interface IKeyMembers {
    name: string
    role?: string
    bio?: string
    alt?: string
    backgroundColor?: string
    socials?: IKeyMemberSocials[]
}

interface ISocial {
    member: IKeyMembers
}

export interface IKeyMemberSocials {
    name: string
    icon: () => JSXElement
    link: string
}

export interface IKeyMembers {
    name: string
    role?: string
    bio?: string
    alt?: string
    backgroundColor?: string
    socials?: IKeyMemberSocials[]
}

From the little i know so far, i think i am doing this right .... yet I am getting cryptic errors Okay, so i've worked it out to the Show component of the solid-js api. If i render without the Show component everything works. ~~Alright, the issue was that i didnt have a fallback element on the Show~~ i was told that the fallback prop is supposed to be optional?

Brendan•2y ago

fallback shouldn't be required. This might be an issue in solid-start only. No problem client-side.

DaOfficialWizard🧙•2y ago

huh, maybe i found a bug xD Everything works perfect if i use the fallback prop - without the fallback prop i get the aformentioned error and warnings - however my components still render correctly so, very strange

Brendan•2y ago

It would be great if you can reproduce with a minimal example from the starter template.

DaOfficialWizard🧙•2y ago

Ill see if i can, i dont think its related to the fallback anymore. I just did some testing

<Show when={props.buttonElement}>
   <div>{props.buttonElement}</div>
</Show>

<Show when={props.buttonElement}>
   <div>{props.buttonElement}</div>
</Show>

That results in no error as well just wrapping the prop in a div fixes the error so, perhaps i can't have a JSXElement type directly as a child? when passed down through props yeah, thats the true issue. After multiple tests. So ... amybe this isnt a bug? Was i just using Show incorrectly? This is the interface for the component:

export interface ICardProps {
    ...
    buttonElement?: JSXElement
    ...
}

export interface ICardProps {
    ...
    buttonElement?: JSXElement
    ...
}

Brendan•2y ago

My (uneducated) guess is there is an issue with solid-start handling this expression props.buttonElement !== undefined || null. It is fine client-side ...although I'd probably simplify to props.buttonElement != null (to give same result using !=). Just for a laugh, does that alternative work? Like perhaps the || is tripping it up.

DaOfficialWizard🧙•2y ago

i tried that as well as with just <Show when={props.buttonElement}> wit the same error, wrapping in a div seems to be the only thing that fixes it.

Brendan•2y ago

Ah sorry - I read that as when you tried that option it had "no error", not "same error" Weird Another random thing to try buttonElement={() => () => <Socials member={member} />} (double function)

DaOfficialWizard🧙•2y ago

Yeah, i cant explain it - i havent seen anything in the docs that would suggest i need to wrap my JSXElements - but maybe i jsut havent found that section yet xD i tried with a Test JSXElement - removed the anonymous call and just passed in Test like so:

buttonElement={Test}

buttonElement={Test}

and like this

buttonElement={() => <Test/>}

buttonElement={() => <Test/>}

both resulted in the same issue

DaOfficialWizard🧙•2y ago

Reading this: https://www.solidjs.com/docs/latest/api#show It does seem that i need to wrap the passed-down prop, or i need to call the prop as a function so that it returns a valid JSX.Element - which i cant do becuse the prop is option and possibly undefined

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

DaOfficialWizard🧙•2y ago

So, the best solution is indeed to wrap the prop in a valid JSX element - like a div

Brendan•2y ago

Does a fragment work <></>

DaOfficialWizard🧙•2y ago

good quesiton, forgot about those it does not a fragment results in the same error

Brendan•2y ago

Hmm, this definitely feels like different behavior than expected when client-side rendering. It might be worth creating a minimal reproduction and filing an issue.

DaOfficialWizard🧙•2y ago

yeah, alright. Thanks for your time

Gaming

Programming

Random errors on previously working project