[✅] start error when import a shadcn component Failed to resolve import "tanstack-start-head-script"
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/@tanstack+start-server-core@1.139.6_crossws@0.4.1srvx@0.9.6/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
Failed to resolve import "tanstack-start-head-script"
Error:
Failed to resolve import "tanstack-start-injected-head-scripts:v" from "node_modules/.pnpm/@tanstack+start-server-core@1.139.6_crossws@0.4.1srvx@0.9.6/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
