#[✅] start error when import a shadcn component Failed to resolve import "tanstack-start-head-script"

55 messages · Page 1 of 1 (latest)

north cape
#

Iam trying to use Start in a new company project, I meet to show the first step soon, I need to use shadcn, but if I import some shadcn component, Iam getting this error:

Failed to resolve import "tanstack-start-head-script"

Error:
Failed to resolve import "tanstack-start-injected-head-scripts:v" from "node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@tanstack/start-server-core/dist/esm/router-manifest.js?v=87ed4909". Does the file exist?

Route:
import { createFileRoute } from "@tanstack/react-router";
import { useLogOut } from "@/hooks/auth/use-logout";
import { Button } from "../../components/ui/button";

export const Route = createFileRoute("/_protected/profile")({
component: ProfileCompoennt,
});

function ProfileCompoennt() {
const { user } = Route.useRouteContext();
const logout = useLogOut();

return (
<div>
<button
type="button"
className="text-gray-200 bg-destructive px-4 py-2 rounded-md"
onClick={() => logout()}
>
Logout
</button>

  <Button>Hola</Button>
</div>

);
}

Hook: import { useServerFn } from "@tanstack/react-start";
import { logoutFn } from "@/api/auth-helpers.server";

export const useLogOut = () => {
const logout = useServerFn(logoutFn);

return logout;
};

LogoutFN: export const logoutFn = createServerFn({ method: "POST" }).handler(async () => {
const session = await useAppSession();
await session.clear();
throw redirect({ to: "/" });
});

Help needed, please

north cape
#

Is good to know that if I remove import form shadcn and use a regular button it works as I expected...same with any component

alpine minnow
#

Any help like this weird edge cases requires a reproducible example :p

north cape
#

@alpine minnow

alpine minnow
#

checking

north cape
#

Thanks!

alpine minnow
#

The problem is your useAppSession, that is next to your cn utils from

#

Your importing import { useSession } from "@tanstack/react-start/server";, that is a server module directly everytime you import a button

#

Button -> Needs cn() -> utils.ts file -> server module imported at the top.

north cape
#

Ohhhhh i get it

#

Thanks so much!!!!

alpine minnow
#

Ideially you shouldnt mix client and server files to keep your sanity in place, just because Tanstack is can do a lot of stuff doesnt mean your are able to shave any server import in client files

#

thats why next for example enforces a "use client" in their client files

#

if you want check vite-env-only , and deny anything that is "/server" or etc to be imported to client

#

or start doing naming conventions such as "utils.server.ts"

north cape
#

I started to make like that

alpine minnow
#

( You could also add a dynamic import, but ... )

north cape
#

In api->auth-helpers.server.ts etc

#

But I missed cn

#

I need to move that useAppSession to this files

alpine minnow
#

ideially you should still follow a pattern where your server files and logic lives in a place where you know, so its harder to get things messed up :p

north cape
#

Yeah...but I was following the auth docs and they put useAppSession in utils so there was where I f*** es up 😂

alpine minnow
#

What auth docs?

north cape
#

Start

#

Auth overview

#

Not overview

#

The next page

#

But they don’t use shadcn so...duh 😅

#

But I get it

#

Is like NextJs

alpine minnow
#

/utils/session.ts :p with nothing else there 😄

north cape
#

But whiteouts the magic strings at top level

#

Yeahp

alpine minnow
#

Yeah, Next enforces via the directive, here nothing is "forced"

north cape
#

But at that points shadcn already created útils.ts

alpine minnow
#

you have the functions and etc, but you still need to know how to correctly split server and client code

north cape
#

Yeah I like the paradigm

#

Is more pure react

#

For that I wanna give it a try

#

Man, thanks so much Iam gonna move forward, greets from Cuba 🇨🇺😁

alpine minnow
#

hahaha all good ! man

#

try this vite plugin with this config

#

( remove stuff that i have from my app :p )

north cape
#

Ummm that’s nice

#

Is like server-only in nextjs

alpine minnow
#

so in that case you know files that have .server, or -server wont endup in client :p

#

making it easier for you to never forget about them

north cape
#

Kudos to you

alpine minnow
#

Enjoy Tanstack man! Night

#

🫡

north cape
#

Thanks again!!!!

#

I will!