SolidJS•3w ago

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•3w 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•3w ago

Did you try wrapping in an ErrorBoundary to capture and display the error?

sh03•3w ago

I did, it doesn't show anything.

Erik Demaine•3w 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•3w ago

I've actually pinned it down to using an action Via useAction(actionName)

jackOP•3w ago

I think same issue for me

sh03•3w 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•3w ago

Repro repo: https://github.com/shoooe/solid-start-blank-page

GitHub

GitHub - shoooe/solid-start-blank-page

Contribute to shoooe/solid-start-blank-page development by creating an account on GitHub.

Erik Demaine•3w ago

Cool! Now that you have an easy reproduction, maybe worth elevating this to a GitHub issue on solid-start.

sh03•3w ago

Yup, done 👍

sh03•3w ago

https://github.com/solidjs/solid-start/issues/1681

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•3w ago

Just to be sure: is this an actual bug or am I missing something stupid? or were you able to resolve yours?

jackOP•5d 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 did you ever come to a conclusion on this ? i see no activity on the gh issue, and i still run into this once in a while

Gaming

Programming

blank page on error