okta/okta-react

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

Opened this issue · 13 comments

Deleted user commented

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 commented

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.

Deleted user commented

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 commented

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 commented

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

jaredperreault-okta commented

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

johnflux commented

Any progress on this?

jaredperreault-okta commented

A fix for this was merged #188

achadha commented

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)```
  • 👍4
jaredperreault-okta commented

@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 commented

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.

  • 👍3
johnflux commented

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";

  • 👍1
  • 👎1
shuowu commented

Patch released in v6.4.3.

  • 👍1
  • 🎉2
baughmann commented

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

  • 👍1