Weird errors upon scaffolding / launching the project

[aisiklar]

Hello
I just created a react-router (v7+) project and did nothing yet :).
But in my root.tsx file there is this code-line:
import type { Route } from "./+types/root";
that creates this error

Cannot find module './+types/root' or its corresponding type declarations ts2307 #12414

I have noticed that there is no types folder in my project structure. It seemed weird to have this error upon launching the project and I am not sure how to solve it.
Any ideas?
Thanks, alptekin

edit:
just seen same error in mmy routes/home.tsx file for the following code line
import type { Route } from "./+types/home";

[aisiklar]

Hi again,
I erased the project and again ran the cli
npx create-react-router@latest my-react-router-app
but this time when the scaffolding bot asked to install node modules, I declined it and installed tne node modules afterwards.

Now there is no type error but when I tried to run the server following errors appeared on the terminal

Seems, there is an error in installing the node modules
Thanks

The errors on the terminal:

[ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "UNSAFE_useRoutesImpl" ../../../../node_modules/react-router-dom/dist/index.js:13:101:
13 │ ...E_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLoc...
[ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "AbortedDeferredError" ../../../../node_modules/react-router-dom/dist/index.js:14:9:

and so on....

NOTE:
When I first buiild the project and ran it with npm run start, there is NO error and starts fine on port 3000

[msakrejda]

Not sure the solution is, but I'm also running into the import type { Route } from "./+types/root"; error. There does not appear to be such a file in my project (freshly-generated with create-react-router@latest).

[discoverlance-com]

Not sure the solution is, but I'm also running into the import type { Route } from "./+types/root"; error. There does not appear to be such a file in my project (freshly-generated with create-react-router@latest).

In a freshly created project or I guess when adding routes in the latest v7, it helps you get type support or inference for your pages with the import type { Route } from "./+types/root"; . This type is supposed to be added to each route depending on the route name or file name.

So the root route should have the type import type { Route } from "./+types/root"; based on the name of the route file. So if you have a route file, about.tsx, it should have the type, import type { Route } from "./+types/about";. Don't worry if you initially add this import at the top of your page and it gives you a type error or your ide shows an error, just run the dev server, and react router will take care of resolving that type for you so you should no longer see that type error after you run the dev server and it picks up the new route changes.

You can import the file from the routes like, import type { Route } from "./+types/about";, but you will not see the file in the routes folder, it's rather in the .react-router/types folder. Typescript will just allow you to import it as if it's in the same directory and the dev server will generate the type.

You can check the route modules type safety docs of react router for more information.

The purpose of this type import is to give your routes type support so for example in your about.tsx route, you can do:

import type { Route } from "./+types/about";

export const loader = async({ request }: Route.LoaderArgs) => {

}

This will then give you type support for your loader function. It can be applied to other functions like actions too... You can check the docs for more information.

[aisiklar]

Thanks for the comments.
Running npm run dev or re-installing the node modules solve the type error but when I run the dev server It produces the following errors...
Do you @discoverlance-com or anyone have an idea on this?

Thanks,

Errors:
✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "UNSAFE_logV6DeprecationWarnings"

node_modules/react-router-dom/dist/index.js:13:36:
  13 │ import { UNSAFE_mapRouteProperties, UNSAFE_logV6DeprecationWarnings, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationConte...
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "UNSAFE_useRoutesImpl"

node_modules/react-router-dom/dist/index.js:13:134:
  13 │ ...ionWarnings, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigat...
     ╵                                                                                  ~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "UNSAFE_useRouteId"

node_modules/react-router-dom/dist/index.js:13:246:
  13 │ ...gationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, useBlocker } from 'react-rout...
     ╵                                                                                   ~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "AbortedDeferredError"

node_modules/react-router-dom/dist/index.js:14:9:
  14 │ export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_Locat...
     ╵          ~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "UNSAFE_useRouteId"

node_modules/react-router-dom/dist/index.js:14:237:
  14 │ ...ontext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromEle...
     ╵                                                                                   ~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "defer"

node_modules/react-router-dom/dist/index.js:14:340:
  14 │ ... createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redire...
     ╵                                                                                         ~~~~~

✘ [ERROR] No matching export in "node_modules/react-router/dist/development/index.mjs" for import "json"

node_modules/react-router-dom/dist/index.js:14:383:
  14 │ ...tesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, repla...
     ╵                

[arjndr]

If anyone else is having the same issue, I fixed it by just removing react-router and react-router-dom and installing it back again using yarn add react-router@latest react-router-dom@latest.

[ryanef]

If anyone is using nvm(node version manager) and used it to install node 20, check to see if it defaults back to using node 16, 18 or whatever older version you had before when you reopen your shells/environments.

nvm alias default 20.18.1 if that's the problem for you and you want to change default

[aisiklar]

Thanks. this was interesting. I set my default to v22.11.0 but the error is still there.

[ryanef]

If I see the error in any future projects I'll see if I can narrow down specifically what I did. I made a few quick changes and that was one of them.

[discoverlance-com]

Are you using any external packages in your project or is it just the create react router project?

I remember getting similar errors when I used a package that had not migrated some of it's modules to import from react-router so it was importing modules that does not exist in react router v7 or has changed.

In my case, I checked out the package, noticed the missing/changed imports from react router, copied some of the code I needed and reconverted it locally in my codebase to import from react router and support new imports from react router.

For instance the json import is not in react router there, you have to use it's alternative, import { data } from 'react-router'.

So if you are using an external pacakge apart from the default provided in the create react router app, you can check the package to see.... If not too, then check your local imports in your codebase to make sure the packages you are importing actually exist in react router if not, then check for what has changed and replace it.

[aisiklar]

Thanks for your answer. No, I did not install anything, it is just what i observe when I run npm run dev after creating the project with npx create-react-router@latest.
I looked for statements like import "json" or import "UNSAFE_useRoutesImpl" etc (from the error messages), but there are no such statements, no demand for such imports. (As the error statements say, there is no such export, too, in the mentioned index.mjs file.)
as a summary, I cannot event start the react router project. Quite annoying.
Building the project and then npm run start works fine. But of course this is not something I need for now.

[discoverlance-com]

Thanks for your answer. No, I did not install anything, it is just what i observe when I run npm run dev after creating the project with npx create-react-router@latest. I looked for statements like import "json" or import "UNSAFE_useRoutesImpl" etc (from the error messages), but there are no such statements, no demand for such imports. (As the error statements say, there is no such export, too, in the mentioned index.mjs file.) as a summary, I cannot event start the react router project. Quite annoying. Building the project and then npm run start works fine. But of course this is not something I need for now.

Hmmm... that's strange then... I have also created a new react router project just now and after, I run npm run dev and it worked alright. I did not see any such errors or warnings on my terminal or app. It launched just fine so I am also not sure what could be wrong I think... I am using node 20 and I tried again by switching to node 22 and it also launched well with no such warnings. I guess it's a strange situation to debug now unless someone else or a maintainer has an idea.

[discoverlance-com]

I don't know if this relates to your issue since you did not use a template but you can check out this issue to see:

#12364

If all fails, I guess you can use the library mode with a vite application and react router to start things out at least till this issue is figured out.

[aisiklar]

hello again
This issue is the same I had, so followed the solution there. It is ok now..

I just dont know the reason of this issue though. I mean why some (a minority I guess) had this and some dont.. Anyway this solved my problem

Thanks a lot...
alptekin

[discoverlance-com]

Yes it's strange that some don't have the issue.

[milko-bentos]

I had the same issue starting from template and uninstalling old react router dependencies and then reinstalling the latest version resolved the issue for me:

`
npm uninstall react-router react-router-dom

npm install react-router@latest react-router-dom@latest
`

[FDiskas]

Probably changing to

import type { MetaArgs } from "react-router";
export function meta({}: MetaArgs) {

is a solution