auth0-spa-js: Typescript fails with auth0-spa-js

Hello,

I’m using the same example of the auth0-spa-js quickstart with typescript and it fails all the time.

this is the code:

import * as React from "react";
import createAuth0Client from '@auth0/auth0-spa-js'
// already tried also
// import * as createAuth0Client from '@auth0/auth0-spa-js'

import {canUseDom} from "../domUtils";


type ProviderProps = Auth0ClientOptions & {
  onRedirectCallback: any,
  ssrUser: any
}

type ContextValueType = {
  isAuthenticated?: boolean,
  user?: any,
  loading?: boolean,
  popupOpen?: boolean,
  loginWithPopup?: (params: any) => void,
  handleRedirectCallback?: () => void,
  getIdTokenClaims?: (...p: any) => any,
  loginWithRedirect?: (...p: any) => any,
  getTokenSilently?: (...p: any) => any,
  getTokenWithPopup?: (...p: any) => any,
  logout?: (...p: any) => any
}

const DEFAULT_REDIRECT_CALLBACK = (appState: any) =>
  // @ts-ignore
  canUseDom() ? window.history.replaceState({}, document.title, window.location.pathname) : null;

export const Auth0Context = React.createContext<ContextValueType>({});
export const useAuth0 = () => React.useContext(Auth0Context);


export const Auth0Provider: React.FC<ProviderProps> = ({
                                children,
                                ssrUser,
                                onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
                                ...initOptions
                              }) => {
 
  const [isAuthenticated, setIsAuthenticated] = React.useState();
  const [user, setUser] = React.useState();
  const [auth0Client, setAuth0] = React.useState();
  const [loading, setLoading] = React.useState(true);
  const [popupOpen, setPopupOpen] = React.useState(false);

  if(ssrUser){
    setUser(ssrUser)
    setIsAuthenticated(!!ssrUser)
  }

  React.useEffect(() => {

      const initAuth0 = async () => {
       
       // **it breaks here!**
        const auth0FromHook = await createAuth0Client(initOptions);

        setAuth0(auth0FromHook);

        if (canUseDom() && window.location.search.includes("code=")) {
          const {appState} = await auth0FromHook.handleRedirectCallback();
          onRedirectCallback(appState);
        }

        const isAuthenticated = await auth0FromHook.isAuthenticated();

        setIsAuthenticated(isAuthenticated);

        if (isAuthenticated) {
          const user = await auth0FromHook.getUser();
          setUser(user);
        }

        setLoading(false);
      };
      initAuth0();

    // eslint-disable-next-line
  }, []);

  const loginWithPopup = async (params = {}) => {
    setPopupOpen(true);
    try {
      await auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      setPopupOpen(false);
    }
    const user = await auth0Client.getUser();
    setUser(user);
    setIsAuthenticated(true);
  };

  const handleRedirectCallback = async () => {
    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const user = await auth0Client.getUser();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(user);
  };


  return (
    <Auth0Context.Provider
      value={{
        isAuthenticated,
        user,
        loading,
        popupOpen,
        loginWithPopup,
        handleRedirectCallback,
        getIdTokenClaims: (...p: any) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p: any) => auth0Client.loginWithRedirect(...p),
        getTokenSilently: (...p: any) => auth0Client.getTokenSilently(...p),
        getTokenWithPopup: (...p: any) => auth0Client.getTokenWithPopup(...p),
        logout: (...p: any) => auth0Client.logout(...p)
      }}
    >
      {children}
    </Auth0Context.Provider>
  );
};

When I’m trying to use this component then I got the error :

Unhandled Rejection (TypeError): auth0_spa_js_1.default is not a function

I’ve been dealing with this issue for days and no solution yet. I’m kinda in a hurry right now. Have anyone of you experienced this?

kind regards, Ibrael