Netlify identity widget Error "Uncaught TypeError: Cannot call class as a function"

Hello!

I’m having a strange bug with the netlify identity widget (GitHub - netlify/netlify-identity-widget: A zero config, framework free Netlify Identity widget) in the production build (site). Later everything worked fine! But now when loading the site I get the error “Uncaught TypeError: Cannot call class as a function”.

Locally everything works perfectly!

Could you help with this? There are no errors (in the logs) when building and deploying to production.
When I commented out the import of widget everything was fine. There seems to be a problem with the widget bundle or transpilation.

Mind sharing a site to check?

how can I do this? site ID = 706e75a2-49df-4663-8ae5-ef78e9055de9

This looks like a customised version of the Identity widget. That’s not something we can help with.

I use this one. Is it custom?

That’s the one we maintain, apolgies, I checked something else before.

Are you sure the error is coming from Identity though? It simply looks like some error in your minified code, and I’m not sure how you got that conclusion.

Yep, the problem is in minified code :frowning: But in dev mode (local) all is ok. But in production I got error.
Why I think that this error is connected with identity widget … Just when I commented out this all is good. May be I’m wrong but I cannot guess the reason from minified code.

Well, we cannot debug the minified code for you. If you’re sure this is coming from the Identity widget, try making a minimal reproduction on a blank site, just to be sure.

Ok, I have tried to create from scratch.
Use this one for minimal site GitHub - jlengstorf/next-minimal-setup
and this article How to Deploy Next.js Sites to Netlify — 5-Minute Tutorial

After that add identity widget and have got the same error “Uncaught TypeError: Cannot call class as a function” (in console) when load site. :frowning:

image

my index.js

import netlifyAuth from "../auth/netlifyAuth.js";
import { useEffect, useState } from "react";

export default function Index() {
  const [loggedIn, setLoggedIn] = useState(null);
  const [user, setUser] = useState(null);

  useEffect(() => {
    netlifyAuth.initialize((usr) => {
      setLoggedIn(!!usr);
      setUser(usr);
    });
  }, []);
  return <h1>BOOP</h1>;
}

package.json

{
  "name": "next-minimal-setup",
  "version": "1.0.0",
  "author": "Jason Lengstorf <jason@lengstorf.com>",
  "license": "ISC",
  "dependencies": {
    "netlify-identity-widget": "^1.9.2",
    "next": "^13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

netlifyAuth.js

import netlifyIdentity from "netlify-identity-widget";

const netlifyAuth = {
  initialize(callback) {
    window.netlifyIdentity = netlifyIdentity;
    netlifyIdentity.on("init", async (user) => {
      if (!user) {
        callback(user);
        return;
      }
    });
    netlifyIdentity.init();
  },
  authenticate(callback, onClose) {
    netlifyIdentity.open();
    netlifyIdentity.on("login", (user) => {
      callback(user);
      netlifyIdentity.close();
    });
    netlifyIdentity.on("close", onClose);
  },
  signout(callback) {
    netlifyIdentity.logout();
    netlifyIdentity.on("logout", () => {
      callback();
    });
  },
};

export default netlifyAuth;

Before adding identity widget all was OK!

May be there is an error using identity widget in my code?

When build and run locally (ntl dev) all is fine.

Sorry for the delay, can you please publish this as a open-source repo so we can test it on our end? We could copy-paste everything, but a repo would be easier to match the exact setup.

Hi, no problem. You can find this here GitHub - kspetrov/testNtl

Thank you, I’ll check it and revert

I tried deploying that repo: f-104690.netlify.app and I don’t see an issue.

I don’t understand :frowning: But my deploy https://main--testntl.netlify.app/ with error.
And all is ok on deploy process
image
How I can take you more information for understanding the problem?

Guys, can we figure it out?
I created a new site in my personal account and got the problem. Why the problem doesn’t reproduce for you? Maybe you are launching the repository not in your personal account, but in your test zone?
2-3 months ago there was no such problem

If you look at the console, our builds are very different (https://f-104690.netlify.app/ and https://main--testntl.netlify.app/).

The only difference I’m seeing in the console is about the error you’re mentioning. But, I’m simply not getting the error you got. Not sure what to make of that.

You can still use Netlify Identity Widget directly from the CDN, right? You don’t need to bundle it with your project. Maybe the bundling is causing issues?

The difference in minified code. I think that our building and bundle process has difference. OK may be I can somehow place to my account already bundled code? Because I don’t get this error when build and bundle it locally.
Is it possible?

I’m not sure how to validate that theory. I simply ran next build and got that result, I’m assuming you did the same too. Not sure how the process differs.

In any case, as I mentioned, if you’re having issues, you can probably use the widget directly from the CDN.

This is the problem: locally everything is fine and next build works good. But the github CD with autodeploy gives an error.
Ok I will try with CDN

Hi i am having the same issue, i have tried with the CDN as well and getting the same error.