SolidJS•2mo ago

BUG?: clientOnly inside Suspense boundary is not shown

I'm using SolidStart and I'm trying to render component based on createAsync result. This component is wrapped with clientOnly - because it depends in the DOM. I did not understand why it did not render this component. Here is a small reproduction

import Test from "./Test";

const TestClientOnly = clientOnly(() => import("./Test"));

export function MyComponent() {
  const a = createAsync(async () => {
    return { data: await getData() };
  });
  return (
    <Suspense>
      <Show when={a()} fallback={<div>Loading tierlist</div>}>
        {/*  This will not render anything ⚠️ only the fallback */}
        {(a) => <TestClientOnly fallback={"Fallback why?"}/>}
        {/*  This will render Test ✅*/}
        {(a) => <Test />}
      </Show>
    </Suspense>
  );

import Test from "./Test";

const TestClientOnly = clientOnly(() => import("./Test"));

export function MyComponent() {
  const a = createAsync(async () => {
    return { data: await getData() };
  });
  return (
    <Suspense>
      <Show when={a()} fallback={<div>Loading tierlist</div>}>
        {/*  This will not render anything ⚠️ only the fallback */}
        {(a) => <TestClientOnly fallback={"Fallback why?"}/>}
        {/*  This will render Test ✅*/}
        {(a) => <Test />}
      </Show>
    </Suspense>
  );

And inside ./Test.tsx

export default function Test(){
    return <div>Test</div>;
}

export default function Test(){
    return <div>Test</div>;
}

2 Replies

nirtamir2OP•2mo ago

I think I found the issue. The getData funciton was

export const getData = cache(async () => {
  "use server";
  const categories = await fetchCategoriesWithTierlist();
  return categories;
}, "categories");

export const getData = cache(async () => {
  "use server";
  const categories = await fetchCategoriesWithTierlist();
  return categories;
}, "categories");

And it was in a different file. When I moved it - it worked @Madaxen86 The issue is not resolved. It's a bug. When I move things to the same file it resolved, but when they where in a different file - it did not render the component. It's very hard to debug also

nirtamir2OP•2mo ago

Opened an issue here https://github.com/solidjs/solid-start/issues/1674

GitHub

[Bug?]: clientOnly inside Suspense boundary with createAsync that u...

Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 I added a stackblitz - it works there but on local env it won't work (and also ...

Gaming

Programming

BUG?: clientOnly inside Suspense boundary is not shown