After v8 update I receive "_matchRoutes is not a function" when using wrapCreateBrowserRouter

[Slessi]

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 SDK are you using?

@sentry/react

SDK Version

8.0.0

Framework Version

18.3.1

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn: '***',
  integrations: [
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 0.1,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

Steps to Reproduce

I setup my react-router v6 as follows.

export function App() {
  return (
    <RouterProvider
      router={Sentry.wrapCreateBrowserRouter(createBrowserRouter)([
        {
          path: '*',
          element: <RouterEntry />,
          children: [
            /* my routes */
          ],
        },
      ])}
    />
  );
}

Expected Result

Should load my routes 🎉

Actual Result

No routes load, and I see the following console error. I cannot find in the migration guide any changes about this so I assume it is a bug as on v7 this code works. Removing Sentry.wrapCreateBrowserRouter allows the routes to load again.

Uncaught (in promise) TypeError: _matchRoutes is not a function
    at handleNavigation (@sentry_react.js?v=aff74ec4:29421:55)
    at @sentry_react.js?v=aff74ec4:29508:9
    at react-router-dom.js?v=aff74ec4:1257:46
    at Array.forEach (<anonymous>)
    at updateState (react-router-dom.js?v=aff74ec4:1257:22)
    at completeNavigation (react-router-dom.js?v=aff74ec4:1332:5)
    at startNavigation (react-router-dom.js?v=aff74ec4:1507:5)

[lforst]

Hi, thanks for writing in. I have two questions:

• Did you make sure Sentry.init() is the first thing happening in your application?
• Just to make sure: You do not happen to have bundled two different Sentry SDK versions into your application?

[Slessi]

@lforst Yea, I am sure I called Init first and don't have multiple sentry versions.

https://stackblitz.com/edit/vitejs-vite-uhrib2?file=src%2Fmain.tsx

Struggled a bit recreating the repro. It seems to only happen when using lazy to load elements. If you see in the above repro, the page does not load my "hi" component. Not sure how to open console inside stackblitz but if you open it as a new page, you will see:

Replacing that lazy prop with element: <LazyComponent /> (so a regular non-lazy import) fixes it also. But of course, I want to use lazy.

[lforst]

@Slessi ok it looks like this issue happens if no dsn is set because the react router integration doesn't run. Also, in your app Sentry.init() was not the first thing being called. Note that imports are evaluated first.

I opened a pr to degrade gracefully if the the integration doesn't run.