How to consume types generated by react-router v7 in another package using the internal package pattern?

[Charioteer]

Hi everyone,

I am trying to work with the internal package pattern and react-router v7. I am building a SaaS application with a package at packages/frontend-themes including different themes/designs for different domains. The react-router application lives at apps/frontend. I want to export the type of actions or their return type from the frontend package so that I can access the returned data at various points in the frontend-themes package e.g. by using useActionData() or useFetcher().

Example

Imagine I have an action in my frontend app like this:

import type { Route } from '.react-router/types/app/routes/checkout/+types/checkout'

export const action = async ({ context, request }: Route.ActionArgs) => {
  // do something useful with context and request
  return 'data'
}

export type CheckoutAction = typeof action

TypeScript Error

When I import CheckoutAction in the frontend-themes package, however, the TypeScript compiler complains during typechecking like this:

../../apps/frontend/app/routes/checkout/checkout.tsx:1:28 - error TS2307: Cannot find module '.react-router/types/app/routes/checkout/+types/checkout' or its corresponding type declarations.

1 import type { Route } from '.react-router/types/app/routes/checkout/+types/checkout'
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

What I've tried

I know that the generated types from react-router are configured to work via TypeScript's rootDirs option. It seems like the frontend-themes package is not aware of this config. I already tried the following adjustments to its tsconfig.json without success:

{
  "compilerOptions": {
    // ... 
    "rootDirs": [".", "../../apps/frontend/.react-router/types"]
  },
  "include": [
    "src",
    "../../apps/frontend/**/*",
    "../../apps/frontend/.react-router/types/**/*"
  ]
}

Does anyone have an idea how I could make the internal package pattern work for my setup? I have a few other plans if it doesn't work but this approach would have the best DX. Thank you so much in advance!

[pawelblaszczyk5]

I guess you later intend to consume these from the app itself? It can’t really work because you’d have cyclical dependency.

If that’s not the case (but I’m not sure what you’d be doing then haha) you can just create a file in your app and export types you wish to export from here. Consumer shouldn’t be aware of how your tsconfig is setup

[Charioteer]

Hi Paweł,

thanks for your reply! The setup works without cyclic dependencies, since frontend-themes only depends on frontend but not vice versa. I built a "plugin-like architecture" so that the frontend does not need to know the implementation details of frontend-themes. They only agree on a common theme interface. During build time, vite just "pulls in" code from frontend-themes because it is linked as a dynamic dependency (however, with a relative path to the code and not as an actual dependency in package.json).

Unfortunately, your idea of "just exporting types" from frontend would only work if it was a compiled package. However, this is not possible in my case due to a lot of reasons. With just in time/internal packages (see e.g. https://turbo.build/docs/guides/tools/typescript#just-in-time-packages), actual source code from another package is referenced. In my case, frontend-themes uses code (i.e. types) from frontend. This way, the tsconfig.json from frontend-themes does matter as it is the source of truth for tsc to typecheck frontend-themes. And during that process, it fails because it does not know about the rootDirs config of frontend :D. However, I probably found a solution, I will post it right after this message on the main thread.

Yet again, thanks for taking the time to think trough my (admittedly "special") setup.

[Charioteer]

For anyone coming accross this discussion, I found a solution which works for me - it might not be the very best though.

Since I am working with subpath imports anyway, I added one for .react-router in the frontend package. This is the config in package.json for all subpath imports:

"imports": {
  "#react-router/*": "./.react-router/*",
  "#app/*": "./app/*"
}

I use #react-router to import the generated types in frontend everywhere now. However, there is still one problem: react-router typegen generates types with the assumption that rootDirs is configured. So it includes relative imports like this:

type Module = typeof import("../root.js")

They work inside frontend but not for consuming internal packages because they do not "understand" the relative imports. I wrote a little script to adjust all the generated paths to be absolute by using subpath imports as well. The script uses zx but obviously can be adjusted to be vanilla node:

import { readFileSync, writeFileSync } from 'node:fs'
import { $, chalk, glob, spinner } from 'zx'

await spinner(
  chalk.gray(`Generating ${chalk.cyanBright('react-router')} types...`),
  () => $`pnpm react-router typegen`
)

const GENERATED_PATH_REGEX = /(app(?:\/routes\/)?.*\/)\+types/
const MODULE_TYPE_REGEX = /type Module = typeof import\("(.*)"\)/

await spinner(
  chalk.gray('Fixing relative paths in generated types...'),
  async () => {
    const generatedFilePaths = await glob('.react-router/**/*.ts')

    for (const generatedFilePath of generatedFilePaths) {
      const match = generatedFilePath.match(GENERATED_PATH_REGEX)
      if (!match) continue

      const [_, importPath] = match

      const content = readFileSync(generatedFilePath, 'utf8')
      writeFileSync(
        generatedFilePath,
        content.replace(MODULE_TYPE_REGEX, (_, modulePath: string) => {
          return `type Module = typeof import("#${importPath}${modulePath.replace('../', '')}")`
        }),
        'utf8'
      )
    }
  }
)

console.log(
  `${chalk.greenBright(
    '✓'
  )} Successfully generated types for ${chalk.cyanBright('react-router')}`
)

Whenever I generate the types using this script, frontend-themes recognizes all types because they can be resolved now using subpath imports. No need for any additional configuration in tsconfig.json anymore.

[pawelblaszczyk5]

Yeah, I had a feeling that there’s a chance you’re using JIT package pattern. That’s one of it weak sides. Wouldn’t it be easier to include a built step with e.g. tsc only for one file that exports needed types or something like this? 😄

[Charioteer]

Yeah, I also have some compiled packages in this monorepo. However, I am using pnpm workspaces which often lead to errors like "The inferred type of X cannot be named without a reference to Y" (TS2742)" (see microsoft/TypeScript#47663 (comment)). It is often annoying/a lot of additional work to cope for that. In addition, I had a problem because whenever rootDirs are configured, tsc complains that rootDir is ambigious. And if you set rootDir to just be ., there is the same problem again: it does not find the .react-router "module" anymore 😄.

[pawelblaszczyk5]

Got it. In general the “.react-router” and type gen makes it a bit hard to work in monorepo. For example I was hoping to split my app routes between a few packages with the new config based routing. But the typegen makes it a pain and typed links working this way makes it even harder 😅

[Charioteer]

I saw the discussion (end even issue?) about that as well. I like that they tried to put some efforts for better type safety in comparison to remix v2 (I love the href() helper! 😄) but it is IMHO way too opinionated. There are no CLI options at all to change the behavior of react-router typegen and it is automatically run all the time by the react-routervite plugin (I do not want that and think it cannot be disabled...).