Okta Widget CSS errors

I am having some trouble with the Okta Widget in react as shown in this overview. Functionally, I have Okta working great but the styles are my issue.

Specifically, in the “Create a Widget Wrapper” section, the following two CSS imports are called for but they don’t seem to be working:

import ‘@okta/okta-signin-widget/dist/css/okta-sign-in.min.css’;
import ‘@okta/okta-signin-widget/dist/css/okta-theme.css’;

Unless I comment them out, I am getting the two errors listed below. I believe this is a bug but let me know if I should recategorize.

ERROR 1:

ERROR in ./src/client/OktaSignInWidget.js
Module not found: Error: Can’t resolve ‘@okta/okta-signin-widget/dist/css/okta-theme.css’ in ‘/Users/jod/Code/uploader-app/app/src/client’

ERROR 2:

ERROR in ./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{padding:5px 9px;text-align:left;word-wrap:break-word}.qtip-content,.qtip-titlebar{position:relative;overflow:hidden}.qtip-titlebar{padding:5px 35px 5px 10px;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;z-index:11;cursor:pointer;outline:medium none;border:1px solid transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-icon .ui-icon,.qtip-titlebar .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:normal 700 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em}.qtip-default{border:1px solid #f1d031;background-color:#ffffa3;color:#555}.qtip-default .qtip-titlebar{background-color:#ffef93}.qtip-default .qtip-icon{border-color:#ccc;background:#f1f1f1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#aaa;color:#111}
|
| /*! Light tooltip style */.qtip-light{background-color:#fff;border-color:#e2e2e2;color:#454545}.qtip-light .qtip-titlebar{background-color:#f1f1f1}

Hi @jodvt

What are the versions of @okta/okta-react and @okta/okta-signin-widget dependencies used by your project in package.json?

@dragos the versions are as follows:

"@okta/okta-react": "^1.2.0",
"@okta/okta-signin-widget": "^3.0.6", 

Thanks.

Hi @jodvt

I apologize for the late answer. okta-theme.css file is part of the second version of the Okta sign-in widget and, in order to migrate successfully to version 3, you need to remove the reference to okta-theme.css.

You can find all the migration details here.