Repository navigation
Use clientOnly without isolating component in its own file #1929
Description
What is this request related to?
Request
📋 Suggested
https://docs.solidjs.com/solid-start/reference/client/client-only
📋 General description or bullet points
Provide a way of using clientOnly without creating a separate file.
Code wise, this could be more ergonomic.
Could also create a helper function to directly translate component function to client only component.
import { clientOnly } from "@solidjs/start"
function ClientOnlyComponent() {
const location = window.document.location
return <div>{location.href}</div>
}
type ResolveClientComponent = (value: {
default: Component
}) => void
export default clientOnly(
() =>
new Promise((resolve: ResolveClientComponent) => {
resolve({ default: ClientOnlyComponent })
}),
)🖥️ Reproduction of code samples in StackBlitz
StackBlitz doesn't support solid-start
Activity
[-][Request]:[/-][+]Use `clientOnly` without isolating component in its own file[/+]atilafassina commentedon Sep 1, 2024
I'll check if this can be accomplished this way and I'll check with the team if there's any repercussions I'm not able to predict right now.
As for the helper, this is probably a feature request to made on SolidStart. In this repository we just document the existing APIs and offer guides on how to use them.
MengLinMaker commentedon Sep 2, 2024
I have a working wrapper which looks something like this:
brenelz commentedon Sep 26, 2024
I think we probably need to figure out a code solution to this before being able to document it. I think using this would be recommended
https://github.com/lxsmnsyc/solid-use/blob/main/docs/client-only.md
ryansolid commentedon Jul 29, 2025
The main reason to have a separate import is to keep the module graph clean. Sometimes client only code has artifacts that will crash the server even if just included in the bundle. This was actually a problem we had with SolidStart beta 1 as things were getting pulled into the bundles. I suppose it is a bit heavy-handed to assume you cannot have it bundled on the server, but it is a safer assumption to make.
lxsmnsyc commentedon Oct 14, 2026
This already works today with the pattern from the report: the loader can resolve a component defined in the same file, as long as it's wrapped in
{ default }. MengLinMaker'suseClientwrapper above is the same idea.#2346 (2.x) and #2347 (1.x) let a
clientOnlyloader resolve to the component itself, so the same-file case becomes a one-liner:One caveat, which is Ryan's point above: the component's file is still part of the server bundle. On the server,
clientOnlyrenders only the fallback and never calls the component, so browser-only code inside the component (likewindowhere) is fine. A browser-only import at the top of the file is still loaded on the server and can crash it. For that case, keep the component in its own file and useclientOnly(() => import("./component")), so it stays out of the server's module graph.I'll close this once #2346 is merged. The docs for this belong in solid-docs.