SolidJS•17mo ago

Solid Start error

https://damon.systems/projects When loading the page it gets loaded I ge tthis error saying l is null and it looks unrelated to my component, and it works locally I dont really know where to go from here. Here is the component: https://github.com/day-mon/damon.systems/blob/main/src/routes/projects.tsx

damon

damon is a software engineer based in the u.s.a.

GitHub

damon.systems/src/routes/projects.tsx at main · day-mon/damon.systems

personal website made in svelte. Contribute to day-mon/damon.systems development by creating an account on GitHub.

80 Replies

Tommypop•17mo ago

Hi, it might be worth using a resource rather than signals for fetching your data, as it has built in error handling functionality as well as a loading state signal You're probably hitting a different branch in production, and accessing a property on something that is undefined

damonOP•17mo ago

the weird thing is I ran the docker file i use when deployed and it works fine its only when deployed on my vps i ge these weird errors

Tommypop•17mo ago

Difference in session storage? Seeing as you try to fetch from there first Maybe try logging which if branches you reach and see if there's a difference between local deployment and vps deployment?

damonOP•17mo ago

I can add in a version number but it builds the docker file on the main branch and i build and run the docker ifle off the main branch so im just confused

Tommypop•17mo ago

I mean code branches, like blocks within if/else statements

damonOP•17mo ago

aah

Tommypop•17mo ago

Sorry for being unclear lol

damonOP•17mo ago

So your suggestion is to not use signals? to store the projects?

Tommypop•17mo ago

Resources wrap signals And make async data fetching and error handling easier https://docs.solidjs.com/references/api-reference/basic-reactivity/createResource So you can check if the resource has errored or loaded And access the data by calling the accessor returned

damonOP•17mo ago

okay ill give it a try

Tommypop•17mo ago

You can then wrap in suspense so the component waits until the data has finished loading before it shows

damonOP•17mo ago

Yeah thanks i guess i gotta read the docs more I have no clue what any of that is thank you for letting me know

Tommypop•17mo ago

The type signatures are super hard to read

Tommypop•17mo ago

Tommypop•17mo ago

This section is probably what you want

damonOP•17mo ago

i updated it and still nothing 😦

Uncaught TypeError: Cannot read properties of null (reading 'nextSibling')
    at entry-client-cbe0ff20.js:6:5371
    at get children [as children] (entry-client-cbe0ff20.js:6:6200)
    at Object.fn (entry-client-cbe0ff20.js:1:37916)
    at Ke (entry-client-cbe0ff20.js:1:5552)
    at ce (entry-client-cbe0ff20.js:1:5338)
    at E (entry-client-cbe0ff20.js:1:1196)
    at Ue (entry-client-cbe0ff20.js:1:4117)
    at xr (entry-client-cbe0ff20.js:1:37907)
    at entry-client-cbe0ff20.js:1:10708
    at L (entry-client-cbe0ff20.js:1:2926)

Uncaught TypeError: Cannot read properties of null (reading 'nextSibling')
    at entry-client-cbe0ff20.js:6:5371
    at get children [as children] (entry-client-cbe0ff20.js:6:6200)
    at Object.fn (entry-client-cbe0ff20.js:1:37916)
    at Ke (entry-client-cbe0ff20.js:1:5552)
    at ce (entry-client-cbe0ff20.js:1:5338)
    at E (entry-client-cbe0ff20.js:1:1196)
    at Ue (entry-client-cbe0ff20.js:1:4117)
    at xr (entry-client-cbe0ff20.js:1:37907)
    at entry-client-cbe0ff20.js:1:10708
    at L (entry-client-cbe0ff20.js:1:2926)

this is also very slow but idk if i am using it right

Tommypop•17mo ago

Ooh it's a nextSibling error, I'll clone the repo later and see if I can debug it

damonOP•17mo ago

thanks tommy 🙂

Tommypop•17mo ago

I've just cloned and can't reproduce your error (I don't use docker), but octokit seems to be trying to import os, which vite is externalizing, and I wonder if this could somehow be causing issues Maybe try removing octokit if you can and see if your page works?

damonOP•17mo ago

but why does it work locally?

Tommypop•17mo ago

Possibly os works during SSR when you're running it locally, but not on the VPS? Could be permissions stuff I'm not sure how everything is configured But octokit is your only dependency on that component that you don't have anywhere else

damonOP•17mo ago

okay thanks, tommy ill look into another solution how did you figure that out btw

Tommypop•17mo ago

vite logged a message in the console saying os was externalised lol

damonOP•17mo ago

i got no clue what that even means haha

Tommypop•17mo ago

Basically os doesn't exist on the client so vite removes it for you in that runtime but it should exist in node so it'll try to run Did removing octokit work for you then?

damonOP•17mo ago

trying it now

damonOP•17mo ago

https://docs.github.com/en/free-pro-team@latest/rest/repos/repos?apiVersion=2022-11-28#list-repositories-for-a-user gh expects you to use octokit

GitHub Docs

Repositories - GitHub Docs

damonOP•17mo ago

but im changin git ot fetch didnt fix 😦 removed octokit completely

damonOP•17mo ago

https://github.com/day-mon/damon.systems/blob/main/src/routes/projects.tsx

GitHub

damon.systems/src/routes/projects.tsx at main · day-mon/damon.systems

Contribute to day-mon/damon.systems development by creating an account on GitHub.

Tommypop•17mo ago

Huh That's really weird And all your other components work?

damonOP•17mo ago

yep its so weird its only on the vps

damonOP•17mo ago

http://upload.montague.im/u/nitOKm.png no errors either (ss)

Tommypop•17mo ago

I'm honestly not sure what the problem could be then A weird hydration issue but only on that VPS

damonOP•17mo ago

is the way i am doing this component like weird in anyway?

Tommypop•17mo ago

You should probably be using Suspense

damonOP•17mo ago

like it doesnt even make the web request but it knows its loading

Tommypop•17mo ago

Suspense should make the resource resolve on the server https://docs.solidjs.com/references/api-reference/control-flow/Suspense So you should be able to remove your <Show when={data.loading}> and put that in the fallback And just move the stuff within <Show when={data()}> inside the suspense

damonOP•17mo ago

im guess im just confused on how it works how does it now when to show the correct code because i want it to display when there is no error and its not loading wouldnt i need a show?

Tommypop•17mo ago

Resources hook into suspense and suspense will automatically find all the resources you use and will wait for them You can probably also remove your <Show when={data.error}>, and replace it with an ErrorBoundary https://docs.solidjs.com/references/api-reference/control-flow/ErrorBoundary

damonOP•17mo ago

https://xgob.in/rylfrtat

gobin

damonOP•17mo ago

so something liek this

Tommypop•17mo ago

Yep that should be good Does it work locally?

damonOP•17mo ago

yep i just deployed i really appreciate all of this by the way, i didnt expect someone to go out of their way to do this

Tommypop•17mo ago

Dw :) I haven't rlly solved anything yet haha

damonOP•17mo ago

Your time was still spent thats what makes teh difference ah it works but i still get the erros in console lol

Tommypop•17mo ago

Better than nothing lol

damonOP•17mo ago

yeah im fine with that i really apperciate that

Tommypop•17mo ago

Can you go into devtools and see where they're happening?

damonOP•17mo ago

i actually learned alot

Tommypop•17mo ago

awesome

damonOP•17mo ago

you want the stack trace or

Tommypop•17mo ago

yeah, sure

damonOP•17mo ago

http://upload.montague.im/u/A4YgVa.png

Tommypop•17mo ago

Does this go away if you remove the For component nextSibling stuff is sometimes because of for stuff being strange

damonOP•17mo ago

should I replace it with a map? like data().map

Tommypop•17mo ago

I'd remove it entirely for now Just to check if it's the source of the problem

damonOP•17mo ago

https://dev.damon.systems/projects

damon

damon | projects

some of the things I have worked on via github

damonOP•17mo ago

nope Formoved hte for

Tommypop•17mo ago

This is honestly so strange, where it works in dev and prod, just not on the VPS What VPS are you using? Sorry about being unable to help much, as everything works locally I can't really test and work on anything myself lol

damonOP•17mo ago

you fixed my problems tommy i really appreciate it contabo vps running arch

damonOP•17mo ago

Another error I ran into https://dev.damon.systems/ literally on the hompage... idk if im just posionous to the library

damon

hello! i'm damon, a software engineer based in the u.s.a. with 1 year of experience.

Tommypop•17mo ago

I presume this is only on your VPS?

damonOP•17mo ago

yep lol

Tommypop•17mo ago

It might just be worth using a different hosting provider then lol If that's possible for you

damonOP•17mo ago

http://upload.montague.im/u/nqMAq4.png

damonOP•17mo ago

im just confused if its running in docker how this could be the issue Im nto saying its not i dont know how that came off just trying to figure out

Tommypop•17mo ago

Yeah I'm honestly not sure All your code looks good to me So possibly it's universal-cookie or something Especially since it was last updated 3 yrs ago

damonOP•17mo ago

okay, ill try to remove that doesnt solid have built in cookie stuff?

Tommypop•17mo ago

it's unlikely yeah it does https://github.com/Tommypop2/PricelessResults/blame/main/frontend/src/context/ThemeProvider.tsx#:~:text=26-,const,%3B,-4%20months%20ago This is some code I've got for handling theming isomorphically I did also write a solid-primitives package for it, but bundling causes issues with it

damonOP•17mo ago

so i can c + p this context and add it to my root component and it should theoritically work]

Tommypop•17mo ago

Just the code I highlighted and the signal just below it sorry for the git blame view lol, copying like to highlights doesn't work from the code view

damonOP•17mo ago

yeah so ihave been having trouble with this so is the issue with dark mode with ssr the server has one value and the client has another?

Tommypop•17mo ago

yeah causes hydration errors which can be the source of nextSibling problems I think You'll also want an effect for updating the theme cookie when the user toggles the theme I have a slightly different function because I'm syncing the theme between tabs

damonOP•17mo ago

do I need to use a provider or can i put this in a root component?

Tommypop•17mo ago

You can just put it in the root But you'll want a provider if you're planning on accessing the theme anywhere else down the tree

damonOP•17mo ago

https://github.com/day-mon/damon.systems/blob/dev/src/root.tsx

GitHub

damon.systems/src/root.tsx at dev · day-mon/damon.systems

Contribute to day-mon/damon.systems development by creating an account on GitHub.

damonOP•17mo ago

well it works locally perfectly not deployed

Tommypop•17mo ago

Huh At least we've removed some unnecessary dependencies lol

damonOP•17mo ago

is tehre anyway i can do some debugging on the deployed verison?

import {Accessor, Component, Setter} from "solid-js";
import {IFont, ITheme} from "~/constants";
import {TbPaint} from "solid-icons/tb";
import {BsGear, BsPencil} from "solid-icons/bs";

interface SettingsProps {
    themes: ITheme[];
    fonts: IFont[];
    theme: Accessor<string>;
    setTheme: Setter<string>
    onButtonClick: () => void;
    font: Accessor<string>;
    setFont: Setter<string>;
    settingsOpen: Accessor<boolean>;
}

const Settings: Component<SettingsProps> = (props) => {

    return (
        <div class="relative">
            <button
                class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none"
                onClick={() => props.onButtonClick()}
            >
                <BsGear class="w-6 h-6"/>
            </button>
            <div
                class={`absolute right-0 mt-2 fade-in py-2 w-48 bg-white dark:bg-gray-800 anim rounded-md shadow-lg ${
                    props.settingsOpen() ? "block" : "hidden"
                }`}
            >
                <div class="px-4 py-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                        <TbPaint class="inline-block w-6 h-6 mr-2"/> Theme
                    </label>
                    <select
                        value={props.theme()}
                        onChange={(e) => {
                            props.setTheme(e.target.value)
                            props.onButtonClick()
                        }}
                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-gray-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    >

                        {props.themes.map((themeOption) => (
                            <option value={themeOption.name}>{themeOption.displayName}</option>
                        ))}
                    </select>
                </div>
                <div class="px-4 py-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                        <BsPencil class="inline-block w-6 h-6 mr-2"/> Font
                    </label>
                    <select
                        value={props.font()}
                        onChange={(e) => {
                            props.setFont(e.target.value)
                            props.onButtonClick()
                        }}
                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-gray-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    >
                        {props.fonts.map((fontOption) => (
                            <option value={fontOption.name}>{fontOption.displayName}</option>
                        ))}
                    </select>
                </div>
            </div>
        </div>
    );
};

export default Settings;

import {Accessor, Component, Setter} from "solid-js";
import {IFont, ITheme} from "~/constants";
import {TbPaint} from "solid-icons/tb";
import {BsGear, BsPencil} from "solid-icons/bs";

interface SettingsProps {
    themes: ITheme[];
    fonts: IFont[];
    theme: Accessor<string>;
    setTheme: Setter<string>
    onButtonClick: () => void;
    font: Accessor<string>;
    setFont: Setter<string>;
    settingsOpen: Accessor<boolean>;
}

const Settings: Component<SettingsProps> = (props) => {

    return (
        <div class="relative">
            <button
                class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none"
                onClick={() => props.onButtonClick()}
            >
                <BsGear class="w-6 h-6"/>
            </button>
            <div
                class={`absolute right-0 mt-2 fade-in py-2 w-48 bg-white dark:bg-gray-800 anim rounded-md shadow-lg ${
                    props.settingsOpen() ? "block" : "hidden"
                }`}
            >
                <div class="px-4 py-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                        <TbPaint class="inline-block w-6 h-6 mr-2"/> Theme
                    </label>
                    <select
                        value={props.theme()}
                        onChange={(e) => {
                            props.setTheme(e.target.value)
                            props.onButtonClick()
                        }}
                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-gray-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    >

                        {props.themes.map((themeOption) => (
                            <option value={themeOption.name}>{themeOption.displayName}</option>
                        ))}
                    </select>
                </div>
                <div class="px-4 py-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                        <BsPencil class="inline-block w-6 h-6 mr-2"/> Font
                    </label>
                    <select
                        value={props.font()}
                        onChange={(e) => {
                            props.setFont(e.target.value)
                            props.onButtonClick()
                        }}
                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-gray-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    >
                        {props.fonts.map((fontOption) => (
                            <option value={fontOption.name}>{fontOption.displayName}</option>
                        ))}
                    </select>
                </div>
            </div>
        </div>
    );
};

export default Settings;

it was something in this component that was causing the bug

Tommypop•17mo ago

Hmm, I'll take another look later. I'd be careful using map because that'll recreate all the DOM nodes every time the value changes, instead you should probably use <For></For>

Gaming

Programming

Solid Start error