Skip to content

Conversation

akamfoad
Copy link
Contributor

@akamfoad akamfoad commented Jul 28, 2025

TL;DR

All imports in routes.ts and all its direct or transitive imports have to be absolute or relative using ./ and ../ notation, path aliases like ~ and @ aren't resolved correctly.

The issue

Vite and TypeScript allows defining aliases to relatively access files without using ./ or ../ notation, this is pretty significant for complex apps at scale as imports point to different, sometimes deeply nested files.

One of the usecases that inspired React Router's config-based route pattern and routes.ts was this, for example if I want to make my apps modular or feature-based, I'd use high level folders to separate features, each of these feature might export their own routes, these routes need to be imported, and for the sake of readability and consistency, we use ~ or @ symbols as relative path aliases.

Also, sometimes, we need to import variables into the routes.ts file, for example when you want to create a unique id for a route and you don't want to duplicate code and future-proof your app, this too, would be imported using an aliased path.

These use-cases aren't currently handled correctly when the routes.ts is evaluated and executed.

Please checkout the playground/framework-spa/app/routes.ts to better get the idea.

Try running pnpm run dev in playground/framework-spa/ project.

Expected Behavior

For the app to work seamlessly regardless of usage of import aliases.

Actual Behavior

Error: Route config in "routes.ts" is invalid.

Copy link

changeset-bot bot commented Jul 28, 2025

⚠️ No Changeset found

Latest commit: 651b369

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants