Module '"@tanstack/router"' has no exported member 'RouterProvider'.

[Eoin-Murphy]

Describe the bug

I am changing our existing react-router-dom to use tanstack router and I followed the Quickstart as closely as I could but now I am getting this error on import: "Module '"@tanstack/router"' has no exported member 'RouterProvider'." The code is in a Routes.tsx component:

`import React, { StrictMode } from 'react'; import { RouterProvider, Router, Route, RootRoute } from '@tanstack/router'; import './assets/sass/app.scss';

let rootRoute = new RootRoute(); const homeRoute = new Route({ getParentRoute: () => rootRoute, path: '/' }); const routeTree = rootRoute.addChildren([homeRoute]); const router = new Router({ routeTree });

declare module '@tanstack/router' { interface Register { router: typeof router; } }

export const Routes = () => { return (

); }; `

NPM list output: ├── @babel/core@7.21.0 ├── @babel/eslint-parser@7.19.1 ├── @bugsnag/js@7.20.0 ├── @bugsnag/plugin-react@7.19.0 ├── @bugsnag/source-maps@2.3.1 ├── @mongodb-js/charts-embed-dom@2.3.1 ├── @parcel/compressor-brotli@2.8.3 ├── @parcel/compressor-gzip@2.8.3 ├── @parcel/transformer-raw@2.8.3 ├── @parcel/transformer-sass@2.8.3 ├── @parcel/transformer-typescript-tsc@2.8.3 ├── @tanstack/router@0.0.1-beta.83 ├── @types/blueimp-md5@2.18.0 ├── @types/react-datepicker@4.8.0 ├── @types/react-router-dom@5.3.3 ├── @types/react@17.0.53 ├── @typescript-eslint/eslint-plugin@5.53.0 ├── @typescript-eslint/parser@5.53.0 ├── assert@2.0.0 ├── blueimp-md5@2.19.0 ├── bootstrap@4.6.2 ├── classnames@2.3.2 ├── eslint-plugin-import@2.27.5 ├── eslint-plugin-jsx-a11y@6.7.1 ├── eslint-plugin-prettier@4.2.1 ├── eslint-plugin-react@7.32.2 ├── eslint@8.34.0 ├── events@3.3.0 ├── http-proxy-middleware@2.0.6 ├── https-browserify@1.0.0 ├── husky@7.0.4 ├── jwt-decode@3.1.2 ├── lint-staged@13.1.2 ├── os-browserify@0.3.0 ├── parcel@2.8.3 ├── path-browserify@1.0.1 ├── prettier@2.8.4 ├── process@0.11.10 ├── react-color@2.19.3 ├── react-copy-to-clipboard@5.1.0 ├── react-csv@2.2.2 ├── react-data-table-component@7.5.3 ├── react-datepicker@4.10.0 ├── react-dom@18.2.0 ├── react-is@18.2.0 ├── react@18.2.0 ├── reactstrap@9.1.6 ├── sass@1.58.3 ├── stream-http@3.2.0 ├── styled-components@5.3.6 ├── typescript@4.9.5 ├── url-join@5.0.0 └── url@0.11.0

In addition I see the following errors when I run TSC `❯ tsc node_modules/@tanstack/router/build/types/index.d.ts:423:39 - error TS1005: '?' expected.

423 id: infer TParentId extends string; ~

node_modules/@tanstack/router/build/types/index.d.ts:576:69 - error TS1005: '?' expected.

576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join<Tail>}> : never; ~

node_modules/@tanstack/router/build/types/index.d.ts:576:110 - error TS1005: '?' expected.

576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join<Tail>}> : never; ~

node_modules/@tanstack/router/build/types/index.d.ts:576:147 - error TS1005: '?' expected.

576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join<Tail>}> : never; ~

Found 4 errors. `

Any help would be appreciated, thanks.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/beta/examples/react/quickstart?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

Create component with following code `import React, { StrictMode } from 'react'; import { RouterProvider, Router, Route, RootRoute } from '@tanstack/router'; import './assets/sass/app.scss';

let rootRoute = new RootRoute(); const homeRoute = new Route({ getParentRoute: () => rootRoute, path: '/' }); const routeTree = rootRoute.addChildren([homeRoute]); const router = new Router({ routeTree });

declare module '@tanstack/router' { interface Register { router: typeof router; } }

export const Routes = () => { return (

); }; `

Expected behavior

I expected to see the RouterProvider importing correctly and be usable in the code

Screenshots or Videos

Platform

• OS: Ubuntu 22.04.1 LTS
• Browser: Firefox
• Version: 0.0.1-beta.83

Node v16.17.0 NPM v8.15.0

Additional context

No response

[tannerlinsley]

The latest version is not deployed to match the docs. The docs are correct. A new version to match them will be out soon.

Tanner Linsley On Feb 21, 2023 at 12:13 PM -0700, Eoin Murphy @.***>, wrote:

Describe the bug I am changing our existing react-router-dom to use tanstack router and I followed the Quickstart as closely as I could but now I am getting this error on import: "Module @./router"' has no exported member 'RouterProvider'." The code is in a Routes.tsx component: `import React, { StrictMode } from 'react'; import { RouterProvider, Router, Route, RootRoute } from @./router'; import './assets/sass/app.scss'; let rootRoute = new RootRoute(); const homeRoute = new Route({ getParentRoute: () => rootRoute, path: '/' }); const routeTree = rootRoute.addChildren([homeRoute]); const router = new Router({ routeTree }); declare module @.***/router' { interface Register { router: typeof router; } } export const Routes = () => { return (

); }; NPM list output: ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── @***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** ├── ***@***.*** └── ***@***.*** In addition I see the following errors when I run TSC ❯ tsc @./router/build/types/index.d.ts:423:39 - error TS1005: '?' expected. 423 id: infer TParentId extends string; ~ @./router/build/types/index.d.ts:576:69 - error TS1005: '?' expected. 576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join}> : never; ~ @./router/build/types/index.d.ts:576:110 - error TS1005: '?' expected. 576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join}> : never; ~ @./router/build/types/index.d.ts:576:147 - error TS1005: '?' expected. 576 type Join = T extends [] ? '' : T extends [infer L extends string] ? L : T extends [infer L extends string, ...infer Tail extends [...string[]]] ? CleanPath<${L}/${Join}> : never; ~ Found 4 errors. Any help would be appreciated, thanks. Your Example Website or App https://stackblitz.com/github/tanstack/router/tree/beta/examples/react/quickstart?file=src%2Fmain.tsx Steps to Reproduce the Bug or Issue Create component with following code import React, { StrictMode } from 'react'; import { RouterProvider, Router, Route, RootRoute } from @./router'; import './assets/sass/app.scss'; let rootRoute = new RootRoute(); const homeRoute = new Route({ getParentRoute: () => rootRoute, path: '/' }); const routeTree = rootRoute.addChildren([homeRoute]); const router = new Router({ routeTree }); declare module @./router' { interface Register { router: typeof router; } } export const Routes = () => { return (

); }; ` Expected behavior I expected to see the RouterProvider importing correctly and be usable in the code Screenshots or Videos Platform

• OS: Ubuntu 22.04.1 LTS • Browser: Firefox • Version: 0.0.1-beta.83

Node v16.17.0 NPM v8.15.0 Additional context No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[Eoin-Murphy]

Ah okay, Thanks for the quick feedback. I will check for updates

[mwarger]

@tannerlinsley Any update on this? I was trying to try this out but was also lost comparing the docs to the released version. Thank you.

[thomaskuntz]

Those landing here might be looking for the React adapter which is: '@tanstack/react-router'. That has the definition for RouterProvider.

[Survikrowa]

`ERROR in ./index.tsx 16:41-55 export 'RouterProvider' (imported as 'RouterProvider') was not found in '@tanstack/react-router' (module has no exports)

ERROR in ./App.tsx 44:59-65 export 'Outlet' (imported as 'Outlet') was not found in '@tanstack/react-router' (module has no exports) @ ./src/view/app/router/router.tsx 3:0-29 5:13-16 @ ./src/client/index.tsx 8:0-51 17:14-20

ERROR in ./src/view/app/router/router.tsx 4:22-31 export 'RootRoute' (imported as 'RootRoute') was not found in '@tanstack/router' (module has no exports) @ ./src/client/index.tsx 8:0-51 17:14-20

ERROR in ./router.tsx 7:23-28 export 'Route' (imported as 'Route') was not found in '@tanstack/router' (module has no exports) @ ./src/client/index.tsx 8:0-51 17:14-20

ERROR in ./router.tsx 13:26-32 export 'Router' (imported as 'Router') was not found in '@tanstack/router' (module has no exports) @ ./src/client/index.tsx 8:0-51 17:14-20`

Doesn't work for me for some reason.

"@tanstack/react-router": "0.0.1-beta.83",
"@tanstack/router": "0.0.1-beta.83",

[armtuk]

The latest version is not deployed to match the docs. The docs are correct. A new version to match them will be out soon. Tanner Linsley …

I like this router a lot, came here from Theo's YouTube, but with the docs broken, not really sure how to proceed with it. I know it's beta, but it's kinda crappy to push docs before the tool's release is ready. Be super helpful if the doc links could be based on the version# exactly rather than just 'v1', then at least we can see docs that work with the version we're currently using?

[berryboylb]

Is anyone gonna say something, i also have the same issue.

[datner]

Install @tanstack/react-router@beta to match the missing imports from the docs

Just to make it pop-out, so people won't repeatedly ask. Yeah the mismatch is not a great look, but the api exists

[ishandutta2007]

@datner not working for me

[datner]

@ishandutta2007 a lot has changed since April, I'm not a maintainer ¯_(ツ)_/¯

[ishandutta2007]

@datner no issues, let this ticket remain closed, I created a new one here https://github.com/TanStack/router/issues/698