`Uncaught TypeError: castRouterInstance.matchRoutes is not a function` with `tanstackRouterBrowserTracingIntegration`

[simPod]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.7.0

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/react';

  Sentry.init({
    dsn: sentryDsn,
    integrations: [
      browserTracingIntegration(),
      browserProfilingIntegration(),
      Sentry.reactRouterV6BrowserTracingIntegration({
        createRoutesFromChildren,
        matchRoutes,
        useEffect: React.useEffect,
        useLocation,
        useNavigationType,
      }),
      Sentry.tanstackRouterBrowserTracingIntegration(router), // added this
    ],
    release: commitHash ?? '',
    sendDefaultPii: true,
    tracesSampleRate: 0.05,
  });

Steps to Reproduce

Initiate app with router

Expected Result

No errors

Actual Result

Uncaught TypeError: castRouterInstance.matchRoutes is not a function
    at Object.afterAllSetup (tanstackrouter.js:34:1)
    at afterSetupIntegrations (integration.js:96:1)
    at BrowserClient._setupIntegrations (baseclient.js:376:27)
    at BrowserClient.init (baseclient.js:251:1)
    at initAndBind (sdk.js:34:1)
    at init (sdk.js:144:14)
    at Module.init (sdk.js:14:9)
    at ./src/index.ts (index.ts:16:3)

[lforst]

Hi, what version of tanstack router are you using and how are you generating the router instance?

[simPod]

    "react-router": "6.23.1",
    "react-router-dom": "6.23.1",

import { wrapCreateBrowserRouter } from '@sentry/react';
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';

import { Layout } from './Layout';
import { routes } from './routes';
import { SentryRouteErrorFallback } from './SentryRouteErrorFallback';

const createBrowserRouterWithSentry = wrapCreateBrowserRouter(createBrowserRouter);

export const router = createBrowserRouterWithSentry(
  [{
    children: routes,
    element: <Layout />,
    errorElement: <SentryRouteErrorFallback />,
    path: '',
  }],
);

[lforst]

@simPod Hey, I am a bit confused. Are you passing a react-router-dom router instance to tanstackRouterBrowserTracingIntegration()? Is there something you are aiming to achieve with that? I am not aware that TanStack Router is interoperable with react-router.

[simPod]

Ok I confused two router libs :D sorry and thanks