Issue with production build in Next.js

[sbamniya]

So, I am trying to use Veriff with Next.js, everything works fine in development mode, but it returns error in production mode.

Here is the sample code how I am using it.

useEffect(() => {
    if (typeof window != "undefined" && email) {
      import("@veriff/js-sdk").then(({ Veriff }: any) => {
        const veriff = Veriff(
          {
            apiKey: process.env.NEXT_PUBLIC_VERIFF_API_KEY,
            parentId: "veriff-root",
            onSession: function (err: any, response: any) {
              console.log("response", response);
              verifyUser({
                verificationId: response.verification.id,
                veriffUrl: response.verification.url,
              });
              (window as any).veriffSDK.createVeriffFrame({
                url: response.verification.url,
                onEvent: function (msg: any) {
                  console.log("msg", msg);
                },
              });
            },
          },
          {}
        );
        veriff.setParams({
          person: {
            givenName: "",
            lastName: "",
          },
          vendorData: me?.email,
        });
        veriff.mount({
          formLabel: {
            givenName: "First name",
            lastName: "Last Name",
            vendorData: "Email",
          },
          loadingText: "Please wait...",
        });
      });
    }
  }, [email]);

Everything is fine in development mode, but in the production mode, I get this error:

8.2caa692da605de2f.js:1 Uncaught ReferenceError: t is not defined
    at n.onsubmit (398.2caa692da605de2f.js:1:6839)
n

To me it seems like something is getting conflict with build, since in npm it's publishes only the build. But I am not sure, any help would be appreciated.

[asooge]

I have the same issue when running a production build (nextjs). local dev works.

similar implementation:

// @ts-ignore 'Veriff' can only be imported by using a default import.
import { Veriff } from "@veriff/js-sdk";
import { createVeriffFrame } from "@veriff/incontext-sdk";
import { Modal } from "ui";
import { useEffect, useId } from "react";

export default function KycModal({
  title,
  visible,
  onClose,
}: {
  title: string;
  visible: boolean;
  onClose: () => void;
}) {
  const KYC_MODAL_ID = useId();

  useEffect(() => {
    const veriff = Veriff({
      apiKey: process.env.NEXT_PUBLIC_VERIFF_API_KEY,
      parentId: KYC_MODAL_ID,
      onSession: (err: any, res: any) => {
        const url = res.verification.url;
        console.log({ err, res });
        createVeriffFrame({ url });
      },
    });
    veriff.mount();
  });
  return (
    <Modal contentClassName="bg-gray-100 dark:bg-transparent" title={title} visible={visible} onClose={onClose}>
      <div id={KYC_MODAL_ID} />
    </Modal>
  );
}

the error I have is:

riff.js:1 Uncaught ReferenceError: t is not defined
    at n.onsubmit (veriff.js:1:6854)

I'm using the latest sdk versions:

"@veriff/incontext-sdk": "^1.3.1",
"@veriff/js-sdk": "^1.5.1",

[sbamniya]

The only workaround I see for time being is use CDN link instead of npm version. I tried that and it's worked.

[asooge]

I can confirm CDN link seems to be a good workaround for now

[reginbald]

Until this is resolved, You can also add swcMinify: false to next.config.js

[StanislovasRamanauskas]

Issue still exists in Next.js production build with SDK. Is there a plan to fix it?

[jaanmolderveriff]

It possible to get this work when you add swcMinify: false in next.config.js and use for example code example below.

import { useEffect } from "react";
import { createVeriffFrame } from "@veriff/incontext-sdk";

declare global {
  interface Window {
    Veriff: any;
  }
}

export default function Home() {
  const API_KEY = "API_KEY_HERE";
  const implementationType = "INCONTEXT_SDK";

  useEffect(() => {
    async function init() {
      // @ts-ignore
      const Veriff = (await import("@veriff/js-sdk")).default.Veriff;

      const veriff = Veriff({
        host: "https://stationapi.veriff.com",
        apiKey: API_KEY,
        parentId: "veriff-root",
        onSession: function (
          err: any,
          response: { verification: { url: string } }
        ) {
          switch (implementationType) {
            // @ts-ignore
            case "JS_SDK":
              window.location.replace(response.verification.url);
              break;
            case "INCONTEXT_SDK":
              createVeriffFrame({ url: response.verification.url });
              break;
            default:
              console.log("Nothing yet");
          }
        },
      });

      veriff.mount({
        formLabel: {
          vendorData: "Other data: email, client id etc.",
        },
      });
    }

    init();
  }, []);

  return (
    <>
      <div id="veriff-root" />
    </>
  );
}