[Bug]: react-router-dom doesn't expose RemixRouter type so return types fail

[BerkeKaragoz]

What version of React Router are you using?

6.15

Steps to Reproduce

Node v18.12.1
Pnpm v8.4.0
Turbo v1.9.3
Installed packages:

      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-router-dom": "^6.15.0"
      Dep:
      "@types/react": "^18.0.25",
      "@types/react-dom": "^18.0.8",
      "@vanilla-extract/css": "^1.12.0",
      "@vanilla-extract/vite-plugin": "^3.8.2",
      "@vitejs/plugin-react": "^4.0.4",
      "interface-cli": "latest",
      "typescript": "^4.8.4",
      "vite": "^4.4.8"

Create router:

import App from "./App"
import { createBrowserRouter } from "react-router-dom"

export const router = createBrowserRouter([{ path: "/", Component: App }])

Expected Behavior

This is the result when we add:

export type { RemixRouter };

To: react-router-dom@6.15.0_react-dom@18.2.0_react@18.2.0/node_modules/react-router-dom/dist/index.d.ts

Actual Behavior

export const router = createBrowserRouter([{ path: "/", Component: App }])

The inferred type of 'router' cannot be named without a reference to '.pnpm/@remix-run+router@1.8.0/node_modules/@remix-run/router'. This is likely not portable. A type annotation is necessary.ts(2742)

[timdorr]

This type is exported from @remix-run/router

[rjcnd105]

This type is exported from @remix-run/router

@timdorr
So how do we solve this?

https://www.npmjs.com/package/@remix-run/router
look at the description of the @remix-run/router package, it says not to use it directly if you only use react-router-dom.

[1111mp]

Why is this issue closed, it still happens with the latest 6.21.3 version.

Maybe this is a temporary solution:

const router: ReturnType<typeof createMemoryRouter> = createMemoryRouter(routes, {
  initialEntries: ["/all"]
});

[builtbylane]

Still seeing this issue on vscode.

[meddyrainzo]

Is there an update to this? It is still closed but not resolved

[rogepi]

import { createBrowserRouter, Link } from 'react-router-dom'

export const router: ReturnType<typeof createBrowserRouter> =
  createBrowserRouter([
    {
      path: '/',
      element: (
        <div>
          <h1>Hello World</h1>
          <Link to="about"> About Us </Link>
        </div>
      ),
    },
    {
      path: 'about',
      element: <div>About </div>,
    },
  ])

As of today, do we still need to write this to resolve Error Msg?

[CodeGetters]

Has the problem not been solved by now?

[BerkeKaragoz]

Wow...

If we need to manually install @remix-run/router still, don't make a v6. Why not create a separate package called remix-router-internals or something? This just looks like funnelling...

Personally I use a git patch

[timdorr]

This is fixed upstream in Typescript 5.5: microsoft/TypeScript#42873 (comment)

[MiloWang2048]

Still getting this error in TS 5.5.2. Can anyone reproduce?

[ryanbender2]

Still getting this error in TS 5.5.2. Can anyone reproduce?

Yep, still broken for me on TS 5.5.4.

[univdev]

This issue is estimated to be an issue for variables that are extracted from inside the router.tsx file.
Most people who are experiencing this issue are not developing with remix.

Therefore, the answer cited below is the most convenient and practical solution.

import { createBrowserRouter, Link } from 'react-router-dom'

export const router: ReturnType<typeof createBrowserRouter> =
  createBrowserRouter([
    {
      path: '/',
      element: (
        <div>
          <h1>Hello World</h1>
          <Link to="about"> About Us </Link>
        </div>
      ),
    },
    {
      path: 'about',
      element: <div>About </div>,
    },
  ])

Thank you @rogepi 👍