Nathan Posts - Answer Overflow

Nathan

•Created by Nathan on 8/11/2024 in #support

Hydration problem in Solid Start

In the following code, I'm using Tanstack Query to fetch some data needed to render a form. When I navigate to the page using client-side navigation (by clicking a link), the form is not visible. It is, however, present on the DOM, but without hydration keys. If I then refresh the page, the form becomes visible, and its elements in the DOM get hydration keys. Any idea what's causing this?

3 replies

SSolidJS

•Created by Nathan on 2/27/2024 in #support

Sharing data between routes

How can I share data between routes in the new Solid Start? I used nested data loading to do this in the old API, but I'm not sure how to replicate it in 0.4+.

1 replies

SSolidJS

•Created by Nathan on 2/23/2024 in #support

Solid-Start preloads 404 page instead of OAuth API route

I'm trying to set up OAuth in a Solid-Start project. I have a API route for a GET request to redirect to the 3rd-party server which works when accessed directly. However, when I try to make a link to that route, the app preloads the 404 page, instead. How can I get it to navigate to the correct route?

9 replies

SSolidJS

•Created by Nathan on 12/26/2023 in #support

Accessing grandchildren

I'm using Astro, and I have an Astro component that passes children to a Solid component. I'd like to iterate over these children, but, unfortunately, Astro wraps them all in a <astro-slot> element. Is there a way to access the children of this element through props.children?

7 replies

SSolidJS

•Created by Nathan on 10/21/2023 in #support

`ReferenceError: Request is not Defined` on Node 18

After adding solid-start-netlify to my project, I get ReferenceError: Request is not defined when I run solid-start start. I know that this can happen with older versions of Node, but I'm running version 18. Any idea what's causing this?

2 replies

SSolidJS

•Created by Nathan on 10/20/2023 in #support

Typing nested routeData

It seems the API for typing nested routeData has changed after I updated to 0.3.7. I used to have

import { routeData as appRouteData } from "../app"

export const routeData = ({ data }: RouteDataArgs<typeof appRouteData>) => createRouteData...

import { routeData as appRouteData } from "../app"

export const routeData = ({ data }: RouteDataArgs<typeof appRouteData>) => createRouteData...

But this doesn't work anymore. How do I adjust the types so that the data argument has the appropriate type?

2 replies

SSolidJS

•Created by Nathan on 9/29/2023 in #support

Confusion with suspense and nested routeData

I have two pages relying on the same data, so I put them in routes app/page1 and app/page2. My goal is to have route data for the app route forwarded to the two pages. The idea is to have a routes/app.tsx that looks something like this:

export const routeData = () => 
  createServerData$(async (_, event) => ...)

const App = () => {
  const data = useRouteData()

  return 
    <>
      <Sidebar />
      <Outlet />
    </>
}
export default App

export const routeData = () => 
  createServerData$(async (_, event) => ...)

const App = () => {
  const data = useRouteData()

  return 
    <>
      <Sidebar />
      <Outlet />
    </>
}
export default App

Then, in each of app/page1.tsx and app/page2.tsx,

export const routeData = ({data}) = createRouteData(() => data())

const Page = () => {
  const rawData = useRouteData()
  return <Component rawData={rawData} />
}

export default Page

export const routeData = ({data}) = createRouteData(() => data())

const Page = () => {
  const rawData = useRouteData()
  return <Component rawData={rawData} />
}

export default Page

I'm having a couple issues. First of all, in order to get anything to load, I needed to shove the following hack into app.tsx:

<Suspense>
  {`${data()`}
</Suspense>

<Suspense>
  {`${data()`}
</Suspense>

Secondly, while Page1 works on initial page load, Page2 does not, and I struggle to find a difference in the data loading between them. ~~Moreover, while Page2 shows the resource stuck on loading on initial page load, the <Suspense> isn't rendering the fallback.~~ Finally, if I load Page2, then navigate to the working Page1, then navigate back, everything is loaded. There seems to be something I'm not getting about routeData, suspense, and resources. Can anybody help me out?

1 replies

SSolidJS

•Created by Nathan on 9/24/2023 in #support

"Make sure your app is wrapped in a `<Router>`" with Lucia-Auth

I'm trying to move over to Lucia-Auth, and I'm following this guide. I have a routeData function that looks like this:

export const routeData = createServerData$(async (_, event) => {
    const authRequest = auth.handleRequest(event.request)
    const session = await authRequest.validate()
    if (session) {
        return redirect("/")
    }
})

export const routeData = createServerData$(async (_, event) => {
    const authRequest = auth.handleRequest(event.request)
    const session = await authRequest.validate()
    if (session) {
        return redirect("/")
    }
})

But it gives me a "Make sure your app is wrapped in a <Router>" error. My app has the usual <FileRoutes /> wrapped in a <Routes> tag, so I'm not sure what the problem is.

2 replies

SSolidJS

•Created by Nathan on 8/19/2023 in #support

Kobalte popover not opening in testing

I'm using a Kobalte popover component. It works just fine in the browser, but for some reason it isn't opening in testing:

test("Clicking the button opens the popover", async () => {
  const openButton = screen.getByRole("button", { name: "open popover" })
  await userEvent.click(openButton)
  expect(screen.getByRole("dialog"))
})

test("Clicking the button opens the popover", async () => {
  const openButton = screen.getByRole("button", { name: "open popover" })
  await userEvent.click(openButton)
  expect(screen.getByRole("dialog"))
})

The above fails for not finding a dialog element.

6 replies

SSolidJS

•Created by Nathan on 7/25/2023 in #support

Testing difficulties in solid-start

I'm running into some perplexing errors with Vitest in my SSR-enabled Solid Start app. In the imports two files, I get Cannot set properties of undefined (setting 'modhash'). In one, it's caused by import { isBefore, parseISO } from "date-fns". In the other, by import { CentralStoreContext } from "../root".
In at least one of the test files, I've done my best to abstract the component being tested away from the routing, but I'm still getting this error. My root.tsx:

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

And my vitest.config.ts:

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

26 replies

SSolidJS

•Created by Nathan on 7/19/2023 in #support

Trouble porting a React hook to Solid

I'm trying to port the usePlaidLink hook to Solid. But after making some adjustments from the React version, I'm getting a stack overflow error in a basic rendering test. This is what I have:

export const createPlaidLink = (options: PlaidLinkOptions) => {
  const [loading, error] = useScript(PLAID_LINK_STABLE_URL);

  const [plaid, setPlaid] = createSignal<PlaidFactory | null>();
  const [iframeLoaded, setIframeLoaded] = createSignal(false);
  const products = ((options as PlaidLinkOptionsWithPublicKey).product || [])
    .slice()
    .sort()
    .join(",");

  createEffect(() => {
    if (loading()) {
      console.log(`loading: ${loading()}`);
      return;
    }

    if (
      !options.token &&
      !(options as PlaidLinkOptionsWithPublicKey).publicKey
    ) {
      console.log("no token");
      return;
    }

    if (error() || !window.Plaid) {
      console.error("Error loading Plaid", error);
    }

    // exit
    if (plaid() != null) {
      plaid()!.exit({ force: true }, () => plaid()!.destroy());
    }

    const next = createPlaid(
      {
        ...options,
        onLoad: () => {
          setIframeLoaded(true);
          options.onLoad && options.onLoad();
        },
      },
      window.Plaid.create
    );

    setPlaid(next);

    onCleanup(() => {
      next.exit({ force: true }, () => next.destroy());
    });
  });

  const ready = createMemo(
    () => plaid() != null && (!loading || iframeLoaded())
  );

  const openNoOp = () => {
    if (!options.token) {
      console.warn(
        "solid-plaid-link: You cannot call open() without a valid token supplied to usePlaidLink. This is a no-op."
      );
    }
  };

  return {
    error,
    ready,
    exit: plaid() ? plaid()!.exit : noop,
    open: plaid() ? plaid()!.open : openNoOp,
  };
};

export const createPlaidLink = (options: PlaidLinkOptions) => {
  const [loading, error] = useScript(PLAID_LINK_STABLE_URL);

  const [plaid, setPlaid] = createSignal<PlaidFactory | null>();
  const [iframeLoaded, setIframeLoaded] = createSignal(false);
  const products = ((options as PlaidLinkOptionsWithPublicKey).product || [])
    .slice()
    .sort()
    .join(",");

  createEffect(() => {
    if (loading()) {
      console.log(`loading: ${loading()}`);
      return;
    }

    if (
      !options.token &&
      !(options as PlaidLinkOptionsWithPublicKey).publicKey
    ) {
      console.log("no token");
      return;
    }

    if (error() || !window.Plaid) {
      console.error("Error loading Plaid", error);
    }

    // exit
    if (plaid() != null) {
      plaid()!.exit({ force: true }, () => plaid()!.destroy());
    }

    const next = createPlaid(
      {
        ...options,
        onLoad: () => {
          setIframeLoaded(true);
          options.onLoad && options.onLoad();
        },
      },
      window.Plaid.create
    );

    setPlaid(next);

    onCleanup(() => {
      next.exit({ force: true }, () => next.destroy());
    });
  });

  const ready = createMemo(
    () => plaid() != null && (!loading || iframeLoaded())
  );

  const openNoOp = () => {
    if (!options.token) {
      console.warn(
        "solid-plaid-link: You cannot call open() without a valid token supplied to usePlaidLink. This is a no-op."
      );
    }
  };

  return {
    error,
    ready,
    exit: plaid() ? plaid()!.exit : noop,
    open: plaid() ? plaid()!.open : openNoOp,
  };
};

I can tell it's cycling endlessly through the exit, setPlaid(next), and onCleanup phases of the createEffect. Any idea what's happening?

3 replies

SSolidJS

•Created by Nathan on 7/12/2023 in #support

Production build failing

My project runs fine on the dev server, but I get an error when I try to run the production build. There's no assets folder in the hierarchy, as far as I can tell, so I don't know what it's trying to refer to.

Error [RollupError]: Could not resolve "./assets/style-5d2e0917.js" from ".solid/server/entry-server.js"
    at error ((project dir)/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at ModuleLoader.handleInvalidResolvedId ((project dir)/inab-start/node_modules/rollup/dist/es/shared/node-entry.js:24650:24)
    at ModuleLoader.resolveDynamicImport ((project dir)/node_modules/rollup/dist/es/shared/node-entry.js:24710:58)
    at async (project dir)/inab-start/node_modules/rollup/dist/es/shared/node-entry.js:24597:32 {
  code: 'UNRESOLVED_IMPORT',
  exporter: './assets/style-5d2e0917.js',
  id: '/Users/nathan/projects/inab-start/.solid/server/entry-server.js',

Error [RollupError]: Could not resolve "./assets/style-5d2e0917.js" from ".solid/server/entry-server.js"
    at error ((project dir)/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at ModuleLoader.handleInvalidResolvedId ((project dir)/inab-start/node_modules/rollup/dist/es/shared/node-entry.js:24650:24)
    at ModuleLoader.resolveDynamicImport ((project dir)/node_modules/rollup/dist/es/shared/node-entry.js:24710:58)
    at async (project dir)/inab-start/node_modules/rollup/dist/es/shared/node-entry.js:24597:32 {
  code: 'UNRESOLVED_IMPORT',
  exporter: './assets/style-5d2e0917.js',
  id: '/Users/nathan/projects/inab-start/.solid/server/entry-server.js',

2 replies

Gaming

Programming