Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[vipulbhj]

I'm using React Router as a...

framework

Reproduction

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("onboarding", "routes/onboarding.tsx"),
  route("dashboard", "routes/dashboard.tsx"),
] satisfies RouteConfig;

import type { Route } from "./+types/dashboard";

import { SidebarProvider } from "~/components/ui/sidebar";
import { DashboardSidebar } from "~/components/dashboard/sidebar";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Dashboard | Profi" },
    { name: "description", content: "Some description" },
  ];
}

export default function Dashboard() {
  return (
    <SidebarProvider>
      <main className="w-full">
        <div className="w-full h-full bg-blue-900" />
      </main>
      <DashboardSidebar />
    </SidebarProvider>
  );
}

When I save file, UI shows, but when I browser refresh, it shows the above error

System Info

Error screen is shown

Used Package Manager

npm

Expected Behavior

Refresh should also show the UI correctly

Actual Behavior

Error screen is shown

[vipulbhj]

It gets fixed if I wrap the Dashboard component in a Suspense ? Why is that ? I am not doing anything related to async

[brophdawg11]

Could you please provide a reproduction of the issue so we can look at whats going on?

[vipulbhj]

Could you please provide a reproduction of the issue so we can look at whats going on?

Sure, https://stackblitz.com/edit/github-q65hcdav?file=app%2Froutes%2Fdashboard.tsx

[brophdawg11]

Looks like a problem with the Uploady component - removing that fixes the issue so I would look into that package and see what you're getting from the export.

[vipulbhj]

Thank you @brophdawg11, I will look into this more.

Just as a first thoughts, I am using the same Uploady component in a different page and that works, so might be something more deeper than surface level issue here.

When using React Router v7, with React 19, do the "use client", "use server" code lines at the top of the life, do anything ?

[brophdawg11]

When using React Router v7, with React 19, do the "use client", "use server" code lines at the top of the life, do anything ?

No, you don't want to use those in RR framework mode since it doesn't support RSC (yet). I don't think they should hurt anything but can't be sure.