Unable to use Okta Widget with React JS

Hi Team,

I am trying to embed Okta widget using react JS code into an HTML page. While using OktaSignIn API.

const widget = new OktaSignIn({
** baseUrl: ‘https://dev-827463.okta.com’,**
** clientId: ‘Xxxxxxxxxxxxx’,**
** redirectUri: window.location.origin,**
** authParams: {**
** issuer: ‘https://dev-827463.okta.com’,**
** responseType: [‘token’, ‘id_token’],**
** display: ‘page’**
** }**
});

I see the JS error in chrome / firefox browser while rendering the widget using below code.

showLogin() {
widget.renderEl(
{ el: ‘#sign-in-widget’ },
response => {
this.setState({ user: response.email });
},
err => {
log.error(err);
}
);
}

API version:

@okta/okta-auth-js”: “3.1.4”,
@okta/okta-react”: “3.0.2”,
@okta/okta-signin-widget”: “4.2.2”,
“react”: “16.8.6”

Error trace:

okta-sign-in.entry.js:14 Uncaught (in promise) TypeError: s.default.allKeys is not a function
at a (okta-sign-in.entry.js:14)
at D.i.constructor (okta-sign-in.entry.js:14)
at D.i.constructor (okta-sign-in.entry.js:14)
at new D.i (okta-sign-in.entry.js:52)
at D.i.initialize (okta-sign-in.entry.js:52)
at D.i.t.Router (okta-sign-in.entry.js:52)
at D.i.constructor (okta-sign-in.entry.js:14)
at D.i [as constructor] (okta-sign-in.entry.js:52)
at new D.i (okta-sign-in.entry.js:52)
at i.n [as renderEl] (okta-sign-in.entry.js:49)
a @ okta-sign-in.entry.js:14
constructor @ okta-sign-in.entry.js:14
constructor @ okta-sign-in.entry.js:14
D.i @ okta-sign-in.entry.js:52
initialize @ okta-sign-in.entry.js:52
t.Router @ okta-sign-in.entry.js:52
constructor @ okta-sign-in.entry.js:14
D.i @ okta-sign-in.entry.js:52
D.i @ okta-sign-in.entry.js:52
n @ okta-sign-in.entry.js:49
showLogin @ index.js:37
(anonymous) @ index.js:29
Promise.then (async)
componentDidMount @ index.js:27
commitLifeCycles @ react-dom.development.js:17334
commitAllLifeCycles @ react-dom.development.js:18736
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18948
(anonymous) @ react-dom.development.js:20418
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20417
performWorkOnRoot @ react-dom.development.js:20346
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
…/…/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
(anonymous) @ aem.js:51
bindJSToDom @ aem.js:45
registerComponent @ aem.js:60
…/…/maven/twitter-aem-modules/business2-twitter-project/business2-ui/src/main/content/jcr_root/apps/business2-twitter/components/control/cr03-okta-widget-new/webpack/index.js @ index.js:70
webpack_require @ bootstrap:19
…/…/…/…/…/…/private/var/folders/8m/6g7v7ph915b462wq_z9wq3z00000gp/T/097b9cf4-050a-4692-b6da-e3a7b2b7d3b8/project.js @ project.js:1
webpack_require @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
Show 14 more frames

Any help would be highly appreciated.

Are you using underscore and what’s the version?

Hi @sumithcl2,
This Could be due to conflicting third party library versions (between the one used by sign in widget and your app) like underscore.js as @haisheng.wu has mentioned.

Please use Source-map-loader webpack plugin and run the application so that you could find out which snippet is throwing this error.