'useRouteMatch' is not exported from 'react-router-dom'

[ghost]

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

Getting the next error on npm start

Failed to compile.

./node_modules/@okta/okta-react/bundles/okta-react.esm.js
Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'.

Following the Okta Sign-In Widget and React guide

Packages I use:

{
    "@okta/okta-auth-js": "^5.1.1",
    "@okta/okta-react": "^6.0.0",
    "@okta/okta-signin-widget": "^5.7.3",
    "react-router-dom": "^6.0.1",
}

The okta-react.esm.js code parts:

import { useRouteMatch, Route } from 'react-router-dom';
...
var match = useRouteMatch(routeProps);

Expected behavior

Compilation without errors

Minimal reproduction of the problem with instructions

Just follow the guide above

Extra information about the use case/user story you are trying to implement

I think the problem is the 6th version of the React Router Dom.

UPD: Found the solution

You should use useMatch in place of useRouteMatch

Environment

• React version: 17.0.2
• Node version (node -v): 16.11.1

Configuration

• Okta application type: Single Page App (SPA)

[ryanmr]

Should we reopen this so that this React Router v6 issue stays in the issues list?

React Router v6 is the new default installation target and this is will block new consumers of this library and react router.

[ghost]

Should we reopen this so that this React Router v6 issue stays in the issues list?

React Router v6 is the new default installation target and this is will block new consumers of this library and react router.

There is already a draft pull request where the problem was mentioned

[ryanmr]

Oh good catch. It seems like that has been sitting there for a while now.

I hope that gets merged into a new version soon. I'm sure parallel support will be required too.

[lenichols]

Has this been merged? I'm running into this same error with update @okta/okta-react

[jaredperreault-okta]

@lenichols @okta/okta-react currently only supports react-router v5. We are currently investigating v6 support

[johnflux]

Any progress on this?

[jaredperreault-okta]

A fix for this was merged #188

[achadha]

Would that actually fix the issue? You'd still be calling the useRouteMatch function which is no longer exported in react-router v6.

Editing to point out that I still get an error when using react-router v6.2.1 in my project along side okta-react v6.4.2.

export 'useRouteMatch' (imported as 'ReactRouterDom') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)```

[jaredperreault-okta]

@achadha you can use react-router-dom v6 with okta-react if you implement your own SecureRoute. More details can be found here #178

[flying-sheep]

I see the same error, in an app not using <SecureRoute/> at all.

The problem is that your ESM bundle contains

import * as ReactRouterDom from 'react-router-dom';
[…]
var match = ReactRouterDom.useRouteMatch(routeProps);

This is still importing useRouteMatch. Anything analyzing imports and e.g. attempting to do tree shaking will catch this. I guess the error comes from webpack or babel or something.

[johnflux]

I found a really ugly solution for anyone desperate to just get this working:

In packages.json in your dependencies, do:

    "react-router-dom": "npm:react-router-dom@5.3.0",
    "react-router-dom-v6": "npm:react-router-dom@^6.2.1",

Then in your own code, import like:

import { Link } from "react-router-dom-v6";

[shuowu]

Patch released in v6.4.3.

[baughmann]

For anyone who's googling this these days:

If you have a dev dependency on @types/react-router-dom you're doing it wrong. As of v6 types have been integrated into the lib, so you're including types from v5: nrwl/nx#10238