[h3] [unhandled] H3Error: Client-only API called on the server side. Run client-only code in onMount
I keep getting the above error I have SSR true in configs when i set it to false everything works alright As it told me that server side code might have some client code I looked back at my server code but didnt find anything specific to client code, what could be a solution? has anyone gotten the error before?
14 Replies
Actually around a month ago the code was working fine I had some stuff going on so couldn't continue writing code for this project. Did I miss some crucial updates? idk, I would be glad if someone could clue me.
We'd need to see some of your code to help. Typically this is a DOM access, but it may not be obvious.
You might start by blanking out various components to isolate which one(s) are causing the error
@Erik Demaine Here is the code https://github.com/7Luke7/sheuketee/tree/main
GitHub
[Bug?]: Error: Client-only API called on the server side. When usin...
Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 On running npm run dev for new solid start project (using basic template) throws a ...
@Erik Demaine Actually if you could give me some more advise about it, it would mean a lot especially on SSR I am new to it.
For example, if you access
document at the top level of a component, you'll get this error
That's a bit too much code to look at. If you could narrow it to one component that causes the error, we could look at that.
But it could also be this apparent bug...Ok I will go through it and kind of blank out some parts of the code
I had something similar bug back then and it was really small import problem it took me so long to figure out back then I will check imports as well
I suspect that /src/routes/xelosani/[id]/(Xelosani).jsx should have the problem
One thing I note is that
FireworkConfetti does DOM operations at the top level (document.getElementById within setTimeout). I'm guessing that can't be triggered during initial page render / SSR though? It probably makes sense to put it into the existing onMount call though.
Otherwise nothing obviously wrong in the (Xelosani).jsx pageI cleared the whole Xelosani.jsx file and only left the hello world template kind of thing but it didnt work
So the landing page the localhost:3000 that I have only Header.jsx makes request to the Header.js file which might have some problems but its not only the landing localhost:3000 page that throws the error all the routes that I have behave same, is there anything wrong with configs? It might be versions complicating with each other as well right?
Maybe try paring down the header, and anything else that renders? Or make a route that renders almost nothing?
So far What i did is I cloned current code from github and completely wiped most of the code just left a hello world page modified versions in it as well but it didn't work, also tried just creating solidstart template i did install everything but npm run dev and I still get the same error
there might be more recent approach to creating solidstart template so I will include what I did so I just ran
npm init solid@latest then npm install and then npm run dev which as I said yield the same error.
So now I am thinking my PC has some package problems since I have debian I maybe messed something up.At this point it sounds like https://github.com/solidjs/solid-start/issues/1679...
did you try pnpm?
I did fix the error but I got different error now:
Error when evaluating SSR module /home/lukachikvaidze/projects/sheuketee/src/routes/(Landing).jsx?pick=default&pick=$css:
|- Error: undefined does not match field "params": [Pattern] of type FunctionExpression
This I think should be either configs or the way I am fetching data I haven't been looking in docs for some time just saw that cache function has been deprecated and some other functions are keep coming.
createAsync that I had written was working perfectly around 2 days ago so here is what I got for now
"use server"
import { query } from "@solidjs/router";
import { verify_user } from "./session_management";
import { getRequestEvent } from "solid-js/web";
export const header = query(async () => {
try {
const event = getRequestEvent();
const session = await verify_user(event);
if (session === 401) {
throw new Error(401);
}
return {
profId: session.profId,
role: session.role,
};
} catch (error) {
if (error.message === "401") {
return 401;
}
console.log("GET USER", error);
}
}, "user-ident");
import { header } from "~/routes/api/header";
const user = createAsync(() => header());
I might not be using best practices here but I just want to know if fetching is correctYou must not export functions wrapped with query from a file with toplevel "use server"
Only the function inside query can be a "use server" function.
The reason is that the queried function needs to run on the client.
The wrapped function will then be a RPC call.