Okta Widget does not not want to work with NextJS + Tailwind (even client side only) due to `@use` directives in distributed CSS

kaseymccurdy commented 2 years ago

I'm submitting a

[x] bug report
[ ] feature request

Background info

We are building a NextJs application that utilizes Tailwind and Postcss (no SASS).

If we include the widget onto the page using things like useEffect to ensure it doesn't render server-side, all is good, but it's not styled.

So, we import the css file as stated here: https://developer.okta.com/code/react/okta_react_sign-in_widget/#create-a-widget-wrapper

...
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
...

This results in a very cryptic error, and generally things exploding everywhere. Developers crying and such. 💥🙇‍♂️

I dug through the node_modules directory and in the dist/css/okta-sign-in.min.css i found two @use "common/mixins" directives in what I would expect to be compiled css. This is unable to be parsed by Postcss.

Should @use rules be in distributed CSS? For now, I'm loading the widget CSS and JS via the CDN without issue, but it'd be nice to be able to use the npm package...

Expected behavior

There should be nothing but pure css in a dist/css directory

What went wrong?

Failed to compile

./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-5-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css)
Error: Invalid mapping: {"generated":{"line":778,"column":-1},"source":"okta-sign-in.min.css","original":{"line":777,"column":21},"name":null}

Steps to reproduce

Use NextJS ^10.0 and TailwindCSS ^2.1.1 or PostCSS ^8.2
Follow the directions here: https://developer.okta.com/code/react/okta_react_sign-in_widget/#create-a-widget-wrapper

Your environment

Okta Sign-In Widget Version: ^5.9.1
Browser: All (firefox for dev)
OS: All (osx for dev)
Language: English, with a little Javascript thrown in.

arvindkrishnakumar-okta commented 2 years ago

@kaseymccurdy Thanks for posting! I'll have someone from our team address this.

naticaceres commented 2 years ago

This will be fixed by this Pull Request https://github.com/okta/okta-signin-widget/pull/2157/checks that fixes the distributed css and correctly compiles the @use sass rules to valid css. The problem causing this issue is the same that is causing this one https://github.com/okta/okta-signin-widget/issues/2138

hwhitworth10 commented 2 years ago

Hey Kasey! I am trying to implement the widget with NextJs currently, and I get an error immediately anytime i import the OktaSigninWidget... i was curious how you guys imported and brought the widget into the application. @kaseymccurdy

kaseymccurdy commented 2 years ago

Hey Kasey! I am trying to implement the widget with NextJs currently, and I get an error immediately anytime i import the OktaSigninWidget... i was curious how you guys imported and brought the widget into the application. @kaseymccurdy

Sorry for the delay!

We basically use the NextJS dynamic import to ensure it's only included client side. In addition, due to the build errors (SCSS) we were getting with including the package via node_modules / npm, we decided to just import the library and it's CSS from a CDN...

/login

...
const OktaSignInWidget = dynamic<IOktaSignInWidgetProps>(
  () => import('@components/auth/OktaSignInWidget').then((mod) => mod.OktaSignInWidget),
  { ssr: false }
);
...
<OktaSignInWidget config={oktaSignInConfig} onError={onOktaError} />

components/auth/OktaSignInWidget

import { logger } from '@lib/logger/logger';
import { useEffect, useRef } from 'react';
// To render the Sign-In Widget in React, you must create a wrapper
// that allows you to treat it as a React component.
// https://developer.okta.com/code/react/okta_react_sign-in_widget/
// Styles and JS for `OktaSignIn` are currently loaded from a CDN via the _document.tsx page
// Due to an issue logged here: https://github.com/okta/okta-signin-widget/issues/2131
// ALSO, forgive all the ts/eslint ignores right in here...Okta's typing is...lacking.

export interface IOktaSignInWidgetProps {
  config: {};
  onError: () => void;
}

export const OktaSignInWidget = ({ config, onError }: IOktaSignInWidgetProps) => {
  const widgetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // ts-ignore here beacuse the widget is being loaded from a CDN at the present moment and cant be found by the TS compiler
    // @ts-ignore
    const widget = new OktaSignIn(config);

    widget
      .showSignInAndRedirect({
        el: widgetRef.current,
      })
      .catch(onError);

    return () => {
      try {
        // cleanup the widget when we're done
        widget.remove();
      } catch (e) {
        logger.info('could not remove okta widget. already removed.');
      }
    };
  }, [config, onError]);

  return <div ref={widgetRef} />;
};

_document.tsx

...
          <script
            src="https://global.oktacdn.com/okta-signin-widget/5.9.0/js/okta-sign-in.min.js"
            type="text/javascript"
          />
          <link
            href="https://global.oktacdn.com/okta-signin-widget/5.9.0/css/okta-sign-in.min.css"
            type="text/css"
            rel="stylesheet"
          />
          <Main />
          <NextScript />
        </body>
...

acarolinafbarros commented 2 years ago

Progress on this? Any other approach?

shuowu commented 2 years ago

@acarolinafbarros I think the issue has been fixed and released with https://github.com/okta/okta-signin-widget/pull/2179, can you try with the latest version of okta-signin-widget?

acarolinafbarros commented 2 years ago

@shuowu For NextJS the issue continues (caused by this import import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';). I used the latest version (5.16.1).

Could you confirm?

DavidFlr1 commented 2 years ago

Hello, if someone is still having the same issue try using v4.1.5 "@okta/okta-signin-widget": "4.1.5" that solve the problem for me

okta / okta-signin-widget