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 Concepts | webpack.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}