React Router v7 "Element type is invalid" for correctly default-exported route component

[waelhabbal]

I'm using React Router as a...

framework

Reproduction

Set up a React Router v7 application with route modules.
Create a route module file (e.g., app/routes/welcome.tsx).
Ensure the primary route component (MyRoute in the example) is the default export of this file.
Navigate to the URL associated with this route in a browser.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12450HX
    Memory: 3.10 GB / 15.71 GB
  Binaries:
    Node: 23.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.5.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (134.0.3124.72)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @react-router/dev: ^7.4.1 => 7.4.1
    @react-router/node: ^7.4.1 => 7.4.1
    @react-router/serve: ^7.4.1 => 7.4.1
    react-router: ^7.4.1 => 7.4.1
    vite: ^5.4.11 => 5.4.16

Used Package Manager

pnpm

Expected Behavior

The route component, being the default export, should render correctly.

Actual Behavior

The browser displays an error indicating: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

[timdorr]

Can you show some code or create a reproduction of this to look at?

[waelhabbal]

Hi! Thanks for the response.

I've put together a minimal reproduction based on the standard setup as outlined in the React Router v7 documentation.

Description of the Issue:

I'm encountering an "Element type is invalid: expected a string or a class/function but got: undefined" error when navigating to the root route (/). This error specifically occurs when the component specified for the root route (routes/home.tsx in this case, which currently contains the Welcome component) uses a default export.

Interestingly, if I remove the default export from the component file and instead use a named export, and then update routes.ts to import and use that named export in the index route configuration, the application works without the error. However, the documentation for React Router v7 seems to indicate that route components should have a default export.

Code Snippets:

Here are the relevant code files:

package.json:

{
  "name": "my-react-router-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
    "@react-router/node": "^7.4.1",
    "@react-router/serve": "^7.4.1",
    "isbot": "^5.1.17",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.4.1"
  },
  "devDependencies": {
    "@react-router/dev": "^7.4.1",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^20",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "react-router-devtools": "^1.1.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.2",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.4"
  }
}

routes.ts:

import { type RouteConfig, index } from "@react-router/dev/routes";
import Welcome from "./routes/home.tsx"; // Assuming Welcome is the default export

export default [index(Welcome)] satisfies RouteConfig;

routes/home.tsx (Welcome component)::

// This setup causes the error
export default function Welcome() {
  return (
    <main className="flex items-center justify-center pt-16 pb-4">
      keep coding ....
    </main>
  );
}


// This setup (using named export) works without the error

// export function Welcome() {
//   return (
//     <main className="flex items-center justify-center pt-16 pb-4">
//       keep coding ....
//     </main>
//   );
// }

Could you please take a look at this and advise if I'm misunderstanding something or if this indeed points to a potential bug?

Thank you for your time and help!

[timdorr]

Ah, I think you're mis-reading the docs. The componentFile here is a string, not the component export itself: https://reactrouter.com/start/framework/routing#index-routes

You should put the path to the file, not import the component and use it in the route config.