Open sbamniya opened 1 year ago
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",
The only workaround I see for time being is use CDN link instead of npm version. I tried that and it's worked.
I can confirm CDN link seems to be a good workaround for now
Until this is resolved, You can also add swcMinify: false
to next.config.js
Issue still exists in Next.js production build with SDK. Is there a plan to fix it?
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" />
</>
);
}
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.
Everything is fine in development mode, but in the production mode, I get this error:
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.