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

Get 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)

4

I faced this issue too. I ended up just loading Auth0 Lock through CDN.

5

Hi @nandanunni-anchor and everyone!

Welcome to the Auth0 Community!

I am sorry about the late reply to your inquiry.

There are several causes for which you might receive the TypeError above, here is what you can do in order to troubleshoot the issue:

  • You could be using an older version of react-scripts, upgrading this could solve your issue
  • If you are using UglifyJS plugin, set the inline to false:
new UglifyJsPlugin({
    uglifyOptions: {
        compress: {
            inline: false // <- Set this to false
        }
        //...
    }
}
  • Check if you are exporting the components correctly.
  • Delete package-lock.json file and use npm to install it again.
  • Try adding the following code to your Vite config file:
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
       parse: path.resolve(__dirname, './node_modules/parse/dist/parse.min.js')
    },
  },
  ...
})

Hope this helps!

If you have any other questions, feel free to leave a reply or post again on the community!

Kind Regards,
Nik

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.