Using okta-react with reach router throws error Module not found: Can't resolve react-router-dom

[nickolasfisher]

I'm submitting this issue for the package(s):

• [ ] jwt-verifier
• [ ] okta-angular
• [ ] oidc-middleware
• [ x ] okta-react
• [ ] okta-react-native

I'm submitting a:

• [ ] Bug report
• [ ] Feature request
• [ x ] Other (Describe below)

Current behavior

a compiler error module not found: can't resolve 'react-router-dom' is thrown when attempting to use the Security component

Expected behavior

The Security component is supposed to be not router-specific and I wouldn't expect to require react-router-dom to use it.

Minimal reproduction of the problem with instructions

Use create-react-app and change your app.js file to below.

import React from 'react';
import './App.css';

import { Router, Redirect } from '@reach/router';
import { Security } from '@okta/okta-react';

let UserContext = React.createContext();

class App extends React.Component {

  state = {
    user: null,
    setUser: user => {
      this.setState({ user });
    }
  };

  render () {

    const baseDomain = process.env.REACT_APP_OKTA_URL_BASE;
    const issuer = baseDomain + '/oauth2/default'
    const clientId = process.env.REACT_APP_OKTA_CLIENTID;
    const redirect = process.env.REACT_APP_OKTA_APP_BASE_URL + '/implicit/callback';

    return (
      <UserContext.Provider value={this.state}>
        <Security issuer={issuer}
          clientId={clientId}
          redirectUri={redirect}
          pkce={true} >
          <Router>
            <Home path='/' />            
          </Router>
        </Security>
      </UserContext.Provider >
    );
  }
}

class Home extends React.Component {
  render() {
    return (<h2>Test</h2>);
  }
}

class PrivateRoute extends React.Component {
  static contextType = UserContext;

  render () {
    let { as: Comp, ...props } = this.props;
    return this.context.user ? <Comp {...props} /> : <Redirect to="/Login" replace={true} noThrow={true} />;
  }
}

export default App;

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

Environment

• Package Version:
• Browser: Firefox 80.0.1
• OS: Windows 10 Pro v1909
• Node version (node -v): 12.16.3
• Other: okta-react version 3.0.5

[swiftone]

@nickolasfisher - Thanks for the report. Your usage looks correct, we'll take a look and see why this is happening. (Superficially I don't see any use of react-router in Security, so it may be a bundling issue)

[aarongranick-okta]

an internal issue was created to investigate: OKTA-333775

[jg185367]

@aarongranick-okta can you please provide an update on OKTA-333775 if available?