[React-Vitejs] TypeError: Super expression must either be null or a function

[nan-dan-unni]

Checklist

• I have looked into the Readme and Examples, and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

I'm currently working on a React application using vitejs framework and I want use auth0-lock for authenticating users. But when I import Auth0Lock or Auth0LockPasswordless from "auth0-lock", I'm getting this error TypeError: Super expression must either be null or a function.

React: v18.2.0
Vite: v5.2.0
auth0-lock: v12.4.0

Searched issues: I've checked #1257 but that doesn't seem to be my problem/solution
Searched community: Couldn't find any solutions for this issue

It's throwing error on initial loading itself. I'm sharing my code and error below:

My code:

import { Auth0LockPasswordless } from "auth0-lock";

const Preview = () => {
  return (
    <div className="flex justify-between border-b-[2px] border-[#f0f0f0] p-6">
      <h1 className="text-black text-xl font-semibold">Preview</h1>
      <button
        onClick={() => {
          const lock = new Auth0LockPasswordless("clientId", "domain");
          lock.show();
        }}
        className="bg-blue-500 text-white px-4 py-1 rounded"
      >
        Login
      </button>
    </div>
  );
};

export default Preview;

Full error:

Uncaught TypeError: Super expression must either be null or a function
    at _inherits (auth0-lock.js?t=1713560656630&v=6df03345:34367:15)
    at auth0-lock.js?t=1713560656630&v=6df03345:34431:7
    at node_modules/auth0-lock/lib/core.js (auth0-lock.js?t=1713560656630&v=6df03345:34641:6)
    at __require (chunk-B2BDBFHY.js?v=70481260:9:50)
    at node_modules/auth0-lock/lib/lock.js (auth0-lock.js?t=1713560656630&v=6df03345:34681:41)
    at __require (chunk-B2BDBFHY.js?v=70481260:9:50)
    at node_modules/auth0-lock/lib/index.js (auth0-lock.js?t=1713560656630&v=6df03345:37581:40)
    at __require (chunk-B2BDBFHY.js?v=70481260:9:50)
    at auth0-lock.js?t=1713560656630&v=6df03345:37591:16

Reproduction

1. Initialize react-vitejs application using the command yarn create vite
2. Install auth0-lock using the command yarn add auth0-lock
3. Import Auth0LockPasswordless in your App.jsx and initialize it.
4. Run the vite app using the command yarn dev

React: v18.2.0
Vite: v5.2.0
auth0-lock: v12.4.0

Additional context

What I've tried:

1. I googled and found this issue to be something related to named exports and I tried the following solution of adding "auth0-lock" alias in vite.config.js but it didn't work.

resolve: {
    alias: {
       "auth0-lock": path.resolve(__dirname, './node_modules/auth0-lock/lib/index.js')
    },
  },

2. I tried using the vite-plugin-commonjs and that also doesn't seem to work

// vite.config.js
import commonjs from "vite-plugin-commonjs";

export default defineConfig({
  plugins: [commonjs()],

My package.json

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "auth0-lock": "^12.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.0"
  }
}

Lock version

12.4.0

Which browsers have you tested in?

Chrome, Edge, Firefox

[Hworden]

I have posted a proposed fix in the following pull request

#2578

[xinghengwang]

Why no update to this issue?

[nan-dan-unni]

I found a workaround — use the CDN instead of installing the package directly:

<script src="https://cdn.auth0.com/js/lock/12.5.0/lock.min.js"></script>

Then, instead of importing, access it like this:

const { Auth0Lock, Auth0LockPasswordless } = window;

Hope this helps!

[ankita10119]

This issue was addressed and resolved in PR #2578, which has now been merged.
Closing this issue as it's been taken care of.