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

Help
,
1

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

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

What I’ve tried:
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

Use vite-plugin-commonjs plugin.

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

@pathikshaha , Even after using this, I’m still having the issue (also tried clearing cache)