S
SolidJS2w ago
jack

blank page on error

on occasion if there's an error that doesn't pop up in console or on my server, the route will just appear blank, with only the parent layouts rendering. this happens somewhat frequently as i'm newer to solid, and debugging it is a pain. i don't really know how to better explain it than that somewhere in the filetree my components just stop rendering but no errors show up anywhere i can send a screen recording if it'd help, but just wondering if this sounds like a familiar bug or something that others have run into
13 Replies
sh03
sh032w ago
I'm experiencing the same. In my case it's probably related to the use of createAsync. Are you using the same by any chance?
Erik Demaine
Erik Demaine2w ago
Did you try wrapping in an ErrorBoundary to capture and display the error?
sh03
sh032w ago
I did, it doesn't show anything.
Erik Demaine
Erik Demaine2w ago
With createAsync, maybe you're losing reactivity somehow, so you never learn that the async resolved and thus don't update the display?
sh03
sh032w ago
I've actually pinned it down to using an action Via useAction(actionName)
jack
jackOP2w ago
I think same issue for me
sh03
sh032w ago
Ok this is fun. So for me the problem was a top level constant that used serverEnv as in:
const GOOGLE_REDIRECT_URI = `${serverEnv.ORIGIN}/auth/google/callback`;
const GOOGLE_REDIRECT_URI = `${serverEnv.ORIGIN}/auth/google/callback`;
If I remove that or if I use "use server" at the top of the file then everything works fine. Server env is declared as:
export const serverEnv: ServerEnv = serverEnvSchema.parse(process.env);
export const serverEnv: ServerEnv = serverEnvSchema.parse(process.env);
So I'm guessing it's the accessing of process.env outside of the "use server" context that caused the issue. Another case (and easiest to reproduce): If I have a module x :
import { action } from "@solidjs/router";
import { OAuth2Client } from "google-auth-library";

const getUserFromGoogleCode = async (code: string) => {
const client = new OAuth2Client({});
};

export const signInWithGoogle = action(async (code: string) => {
"use server";

const googleUser = await getUserFromGoogleCode(code);
});
import { action } from "@solidjs/router";
import { OAuth2Client } from "google-auth-library";

const getUserFromGoogleCode = async (code: string) => {
const client = new OAuth2Client({});
};

export const signInWithGoogle = action(async (code: string) => {
"use server";

const googleUser = await getUserFromGoogleCode(code);
});
and call signInWithGoogle from a route page:
import { useAction } from "@solidjs/router";
import { onMount } from "solid-js";
import { signInWithGoogle } from "~/lib/x";

export default function Page() {
const signIn = useAction(signInWithGoogle);

onMount(() => {
console.log("Never shown");
});

return (
<div>Title</div>
);
}
import { useAction } from "@solidjs/router";
import { onMount } from "solid-js";
import { signInWithGoogle } from "~/lib/x";

export default function Page() {
const signIn = useAction(signInWithGoogle);

onMount(() => {
console.log("Never shown");
});

return (
<div>Title</div>
);
}
No errors on console or server but console.log is never shown. If you comment out const signIn = useAction(signInWithGoogle); then the console log is shown on the client as expected.
sh03
sh032w ago
GitHub
GitHub - shoooe/solid-start-blank-page
Contribute to shoooe/solid-start-blank-page development by creating an account on GitHub.
Erik Demaine
Erik Demaine2w ago
Cool! Now that you have an easy reproduction, maybe worth elevating this to a GitHub issue on solid-start.
sh03
sh032w ago
Yup, done 👍
sh03
sh032w ago
GitHub
[Bug?]: useAction causes silent crash on the client · Issue #168...
Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 Using useAction with non trivial server side code causes a silent crash on the clie...
sh03
sh032w ago
Just to be sure: is this an actual bug or am I missing something stupid? or were you able to resolve yours?
jack
jackOP2w ago
I’m not sure what causes it Because of the layout, I can figure out pretty quickly what level of the component tree the breaking page is at But then it’s just a matter of isolating pieces of code to find where the error happens
Want results from more Discord servers?
Add your server