How to import route-specific types for actions/loaders in .server directory with React Router v7?

[yoshizawa56]

I'm trying to use the new type safety features in React Router v7 while keeping my server-side logic secure. I've placed my actions and loaders in a .server directory to prevent server-side code from being bundled with client-side code (similar to Remix's conventions for server-side code isolation).
My project structure looks like this:

app/
├── routes.ts
├── routes/
│   └── products.tsx
└── .server/
    ├── actions/
    │   └── products.ts
    └── loaders/
        └── products.ts

I understand that React Router generates types in .react-router/types/ directory, but I'm not sure how to properly import and use these types in my server-side code.

For example, in app/.server/loaders/products.ts:

// How should I import the Route type here?
export async function loader({ params }: Route.LoaderArgs) {
  // ...
}

Could someone explain:

1. What's the correct way to import route-specific types in server directories?
2. Are there any specific configuration needed in tsconfig.json for this use case?
3. Is this a supported use case, or should the actions/loaders be defined differently while maintaining the security benefit of server-side code isolation?

Thanks in advance for any help or guidance!

[akomm]

.server imports are not removed by remix/vite. Only imports used exclusivelly within action and loader are removed by remix.

.server imports will just trigger error when used in client build.

As long as your server code is in .server folder or the file ends with .server, when you import it accidentally the wrong way your build will be blocked by error. This is also the case when you have multiple imports route <- A <- B <- C.server or route <- A <- .server <- B

If you import and use A outside loader or action, it will not be removed from client and hence trigger error. You don't even have to think about the entire chain, because you might later add something to B that is .server. And the moment you do it, you will get error. No simple way shoot yourself in foot without noticing.

I see very litle sense in having the entire Route (& LoaderArgs, ActionArgs) be in a separate file.

Note of potential interest:

If you do want to use just types from .server, you need to pay attention to:
import type {a} from "..." and not import {tyoe A} from "..."

Because the first one would be entirelly removed, the later would leave behind import {} from "..." and you would get error, even though you don't use any runtime code from .server.