the default template is broken

[akoskm]

Hi!

After following the instructions here: https://reactrouter.com/start/framework/installation

and running npm run dev, I get:

/my-react-router-app$ npm run dev

> dev
> react-router dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [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 │ ...ataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, use...
         ╵                                                             ~~~~~~~~~~~~~~~~~~~~

✘ [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:213:
      13 │ ...ef, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, useBlock...
         ╵                                                               ~~~~~~~~~~~~~~~~~

✘ [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, UN...
         ╵          ~~~~~~~~~~~~~~~~~~~~

✘ [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 │ ...ionContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren...
         ╵                                                               ~~~~~~~~~~~~~~~~~

✘ [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 │ ... createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRout...
         ╵                                                                     ~~~~~

✘ [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 │ ...teRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, ...
         ╵        

Installing [email protected] fixes the issue as described here:

remix-run/react-router#12364 (comment)

What causes this issue? Should be [email protected] part of the default template?

[brookslybrand]

I think this is somehow related to older versions of npm looking at the comments in the discussions. react-router-dom shouldn't be needed in the default template, and if there remains package misconfiguration issues then that should be addressed in the react-router repo.

I would recommend ensuring that you are using node 20 or 22 and the associated npm version. If you are still running into this limitation, please open an issue in the react-router repo, thanks!

[judocode]

@brookslybrand I get that this may be a react-router issue, but just for posterity for anyone searching this issue, I am using the latest Node (v22.13) and npm (v11.0) and still get this error. The only thing that fixes it is to install react-router-dom

[brookslybrand]

@judocode I am not able to reproduce this issue. The behavior you're describing would definitely be a bug though, so if you're able to provide steps to reproduce, please open a new issue

However, I have a suspicion that #12475 might solve it, so you may want to try using version 7.1.2-pre.0 of react-router first. If that still doesn't solve it, then an issue would be very much appreciated so we can track that down.