matchRoutes type is incompatible with routes parameter in react-router integration

[rafael-zilberman]

Is there an existing issue for this?

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

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

7.15.0

Framework Version

17.0.2

Link to Sentry event

No response

Steps to Reproduce

Following the react-router integration documentation here:
https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/

Using the following code:

import {
    createRoutesFromChildren,
    matchRoutes,
    useLocation,
    useNavigationType
} from "react-router-dom";

Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    integrations: [new BrowserTracing({
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
            useEffect,
            useLocation,
            useNavigationType,
            createRoutesFromChildren,
            matchRoutes,
        ),
    }), new ExtraErrorDataIntegration(), new OfflineIntegration(), postHogIntegration],
    tracesSampleRate: 1.0,
});

Expected Result

No typescript error should be shown

Actual Result

Produces the following Typescript error:

TS2345: Argument of type '<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: string | Partial<Location>, basename?: string | undefined) => AgnosticRo
uteMatch<...>[] | null' is not assignable to parameter of type 'MatchRoutes'.
  Types of parameters 'routes' and 'routes' are incompatible.
    Type 'RouteObject[]' is not assignable to type 'AgnosticRouteObject[]'.
      Type 'RouteObject' is not assignable to type 'AgnosticRouteObject'.
        Type 'RouteObject' is not assignable to type 'AgnosticNonIndexRouteObject'.
          Type 'RouteObject' is not assignable to type '{ children?: AgnosticRouteObject[] | undefined; index?: false | undefined; }'.
            Types of property 'children' are incompatible.
              Type 'RouteObject[] | undefined' is not assignable to type 'AgnosticRouteObject[] | undefined'.
                Type 'RouteObject[]' is not assignable to type 'AgnosticRouteObject[]'.
                  Type 'RouteObject' is not assignable to type 'AgnosticRouteObject'.
                    Type 'RouteObject' is not assignable to type 'AgnosticNonIndexRouteObject'.
                      Types of property 'index' are incompatible.
                        Type 'boolean | undefined' is not assignable to type 'false | undefined'.
                          Type 'true' is not assignable to type 'false'.
    36 |                 useNavigationType,
    37 |                 createRoutesFromChildren,
  > 38 |                 matchRoutes,
       |                 ^^^^^^^^^^^
    39 |             ),
    40 |         }), new ExtraErrorDataIntegration(), new OfflineIntegration(), postHogIntegration],
    41 |         tracesSampleRate: 1.0,

[AbhiPrasad]

Hey thanks for writing in! This may be fixed by #5915, will double check!

Edit: yeah it seems like it should! Will backlog as it seems there is the fix there.