SolidJS•3d ago

SolidStart: serialization error when there is a default value in `createSignal`

Hello, I am trying to learn solid with the async resource tutorial: https://www.solidjs.com/tutorial/async_resources but with an api route in the app. The api route is just a simple GET with the same thing. I created https://github.com/mingchia-andy-liu/solidjs-test as MVP. Whenever there is a default value in my component. npm run dev will throw an error.

    cause: j [Error]: Seroval caught an error during the parsing process.
    Error
    The value [object Function] of type "function" cannot be parsed/serialized.

    cause: j [Error]: Seroval caught an error during the parsing process.
    Error
    The value [object Function] of type "function" cannot be parsed/serialized.

However, if I start dev mode without a default value, then edit the file after. The hot module reload would successfully compile the component. Problematic line: https://github.com/mingchia-andy-liu/solidjs-test/blob/b73e90ae7429380b9dbc03b0c7aabd792094a115/src/routes/index.js#L17 I am not sure what could be causing this issue. Preset is cloudflare module as I want to deploy this in cloudflare. I am not sure if this changes anything.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

GitHub

GitHub - mingchia-andy-liu/solidjs-test

Contribute to mingchia-andy-liu/solidjs-test development by creating an account on GitHub.

GitHub

solidjs-test/src/routes/index.js at b73e90ae7429380b9dbc03b0c7aabd7...

Contribute to mingchia-andy-liu/solidjs-test development by creating an account on GitHub.

9 Replies

Madaxen86•3d ago

Simple answer: use createAsync and query for data fetching in SolidStart

import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = query(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = query(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

https://docs.solidjs.com/solid-start/building-your-application/data-loading

Madaxen86•3d ago

Or of you prefer a video: https://www.youtube.com/watch?v=Qw9am5NL6AI

Martin Rapp

YouTube

Data fetching in Solid-Start

In this video we cover the basics of the createAsync primitives, server functions, cache wrapper, Suspense, ErrorBoundaries, route preloading and how they interact with each other. Github repo: https://github.com/madaxen86/solid-tutorials/tree/master/data-fetching

Madaxen86•3d ago

More sophisticated and on your problem. During the initial load, fetchUser will be executed on the server, thus you need to add the host to the fetchCall e.g.

const fetchUser = async (id) => (await fetch(`http://localhost:3000/api/users/${id}`)).json();

const fetchUser = async (id) => (await fetch(`http://localhost:3000/api/users/${id}`)).json();

but you better use createAsync and query as they have more benefits like deduping, preloading etc.

blazekidsOP•2d ago

Thank you! The hostname solves the serialization issues. So when the server executes the first call, there is no concept of "relative" path of the hostname, so it doesn't know where to call. Therefore, fails the prerender part of the component. This is like the "cookie" issue in the video, sometimes it's document.cookie, sometimes it's request.cookie. If this is the case, is the convention to always supply the hostname when data fetching even though it's same server? Is there a pattern on how to inject the domain in SolidStart?

Madaxen86•2d ago

The difference is that the browser is aware of the current hostname, while the (node) server isn’t. You can create a factory function which prepends the hostname for every fetch and you can put the hostname in .env If the env starts with VITE_ it will be available in the browser

peerreynders•2d ago

Back during the first beta I solved that problem on the server side by inspecting the incoming request (client side it's easy enough with Location on window or document). https://github.com/peerreynders/solid-start-notes-basic/blob/2fe3462b30ab9008576339648f13d9457da3ff5f/src/route-path.ts#L6-L26 That exact code won't work now—but the value returned by getRequestEvent() (similar to APIEvent) exposes the h3 event via the nativeEvent property. event.headers should give you access to the host header. Or use a utility function like getRequestURL(event) which returns a URL object.

MDN Web Docs

Location - Web APIs | MDN

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.

MDN Web Docs

Window: location property - Web APIs | MDN

The Window.location read-only property returns a Location object with information about the current location of the document.

GitHub

solid-start-notes-basic/src/route-path.ts at 2fe3462b30ab9008576339...

Basic client rendered notes app using SolidStart beta - peerreynders/solid-start-notes-basic

peerreynders•2d ago

Actually, it looks like event.url is already supported. So getRequestEvent().nativeEvent.url.origin should likely give you what you need.

MDN Web Docs

URL: origin property - Web APIs | MDN

The origin read-only property of the URL interface returns a string containing the Unicode serialization of the origin of the represented URL.

GitHub

h3/src/types/event.ts at b3759753bb868c448bf9a78cdbf4e9b7a22d4cb9 ·...

⚡️ Minimal H(TTP) framework built for high performance and portability - unjs/h3

blazekidsOP•2d ago

This is a neat to solve the issue. Thank you for sharing this!

peerreynders•2d ago

Seems vinxi exposes app.config.server.baseURL via import.meta.env.SERVER_BASE_URL Example: https://github.com/maplibre/maplibre-style-spec/blob/8e10188ec6bd994dd7a7c8cc29a69021daefd5fb/docs/app.config.ts#L19 https://github.com/maplibre/maplibre-style-spec/blob/8e10188ec6bd994dd7a7c8cc29a69021daefd5fb/docs/src/app.tsx#L11 If that (still) works, probably the way to go (server side).

GitHub

maplibre-style-spec/docs/src/app.tsx at 8e10188ec6bd994dd7a7c8cc29a...

MapLibre Style Specification & Utilities. Contribute to maplibre/maplibre-style-spec development by creating an account on GitHub.

GitHub

maplibre-style-spec/docs/app.config.ts at 8e10188ec6bd994dd7a7c8cc2...

MapLibre Style Specification & Utilities. Contribute to maplibre/maplibre-style-spec development by creating an account on GitHub.

Gaming

Programming

SolidStart: serialization error when there is a default value in `createSignal`

Did you find this page helpful?