Inline type import issue when migrating to React Router v7

[RawandDev]

In my project, I enforce inline-import for types. My eslint rules are like

rules: {
    "@typescript-eslint/consistent-type-imports": [
      "error",
      { fixStyle: "inline-type-imports" },
    ],
    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
    "import/no-duplicates": ["error", { "prefer-inline": true }],
  },

With these rules, inline type imports like this are allowed:

import { type MyType, myFunc } from "general.ts"; // ✅ Preferred

But top-level type imports are not:

import type { MyType } from "general.ts"; // ❌ Not allowed

However, when importing Route in React Router v7, there seems to be issues resolving paths when using inline type imports. For example:

import { type Route } from "./+types/about"; // ❌ Error: Unable to resolve path to module

The error disappears if I use a top-level type import:

import type { Route } from "./+types/about"; // ✅ Works but violates my rules

I want to maintain inline type imports across my project while resolving this issue. I could disable the rules or allow top-level imports, but I prefer to keep the rules consistent.

In the docs, it is mentioned as top level import so I was curious if anyone else faced this issue and there is a good workaround.

[akamfoad]

I have the same issue, I added the ./+types to ignore option of the no-unresolved rule but the issue still persisted.

[batchor]

What does the +types mean actually?

My App can still run even I remove that line.

Really dislike the framework implicitly do something for me.

[Mingholy]

When you add a route module, typings related to it will be generated in an 'isomorphic' directory .react-router/types, which likely has the same structure with your modules.

Eslint seems not be able to solve this kind of 'import' for now, or it will when you configure the 'import/resolver' properly but I haven't tried yet. Adding ignore: ['\\./\\+types'] may be one of those quick and dirty solutions. Notice: the string should be a valid RegExp.

[estenp]

I've had this problem lingering ever since I upgraded to RR7 and I still can't figure it out. I followed the docs closely during migration, but they don't mention anything about eslint, which seems to be the problem here.

I thought maybe I was having problems because my folder structure is probably unique relative to most RR projects. I put my route files inside of semantic "module" folders: e.g. app/modules/User/routes, but I've found:

a) the import is actually resolved. I can access my route types via the import just fine. Eslint just thinks it isn't, and
b) I've also been able to sort of work around this with a custom path alias:

"paths": {
    "@route-types/*": ["./.react-router/types/app/modules/*"]
},

Which let's me do something like: import { Route } from "@route-types/User/routes/+types/users"; which is resolved fine.

So, I'm sure it's something to do with eslint, but I'm not sure what config is needed.