Axios request on Next.js page freezes tab - node.js

Question

Wondering how to debug (Or where to get started) on my current Axios issue. I have a Next.js project (12.3) and have an axios interceptor hook that handles all of my internal requests. The interceptor works on every action /on every page however this certain page /me/settings/password&security/email/verify.
This specific action is being used on several other pages with no issue. Evenb copying the entire page from a working one freezes the tab. It hangs in preflight for a few minutes then I get an iteration of [Violation] 'submit' handler took <N>ms.
Here is my entire page:
export default function VerifyEmailForm() {
const router = useRouter();
const user: UserState = useSelector((root: RootState) => root.user);
const [apiError, setApiError] = useState("");
const [schema, setSchema] = useState<any>();
const [resubmit, setResubmit] = useState(false);
const [updateEmail, setUpdateEmail] = useState(false);
const [submitSuccsess, setSubmitSuccess] = useState(false);
const [dispatchAxios, { success, loading, error }] = useAxios();
const initialValues = {
email: user?.email ? user?.email : "",
};
const handleSubmit = async (values: any) => {
if (!user.email || updateEmail) {
await dispatchAxios(
updateUser({
action: [
{
key: "email",
value: values?.email,
},
],
})
);
}
await dispatchAxios(requestEmailVerification(values?.email)).then((res) => {
if (res?.data?.error) {
setApiError(res?.data?.error);
} else {
setResubmit(true);
setSubmitSuccess(true);
}
});
};
useEffect(() => {
const yup = import("yup").then((yup) =>
setSchema(
yup.object().shape({
email: yup
.string()
.email("Must be a valid email")
.required("Email is required"),
})
)
);
}, []);
useEffect(() => {
if (error && !loading) {
setApiError(error?.message);
}
}, [loading, success, error]);
return (
<Formik
validationSchema={schema}
initialValues={initialValues}
onSubmit={handleSubmit}
validateOnBlur={true}
>
{({ handleSubmit, setFieldValue, errors, values, touched, isValid }) => {
return (
<Form
onSubmit={handleSubmit}
onBlur={() =>
setTimeout(() => {
setApiError("");
}, 200)
}
>
<div className="flex flex-wrap gap-9 pb-2.5 ">
{!user.email || updateEmail ? (
<div className="w-full relative">
<div className="relative w-full">
<Field
styles="bg-transparent text-center"
name="email"
type="email"
placeholder="Email address"
component={InputField}
error={errors.email}
/>
{values.email && (
<button
type="button"
onClick={() => setFieldValue("email", "")}
className={`flex items-center justify-center bg-background-secondary p-0.5 rounded-full w-4 h-4 absolute bottom-2 ${
errors.email ? "right-8 " : "right-2.5 "
}`}
>
<span className="sr-only">Clear Field</span>
<XMarkIcon
className="text-deactive w-2.5 "
aria-hidden="true"
/>
</button>
)}
</div>
<InputError
error={errors.email as string}
touched={touched?.email as boolean}
styles={"flex justify-center"}
/>
</div>
) : (
<></>
)}
<div className="w-full flex flex-col justify-center items-center">
<Button
type="submit"
disabled={!isValid}
classes={`w-full text-white p-3 rounded-2xl mx-8 ${
errors.email || !values.email.length
? "border-transparent text-deactive"
: "border-2 border-primary"
}`}
label={resubmit ? "Resend Verification" : "Verify"}
/>
{user.email && (
<Button
type="button"
classes={`w-full text-white p-3 rounded-2xl mx-8 border-transparent`}
label="Update Email"
onClick={() => setUpdateEmail(true)}
/>
)}
<Button
type="button"
classes={`w-full text-white p-3 rounded-2xl mx-8 border-transparent`}
label="Cancel"
onClick={() => router.back()}
/>
</div>
</div>
<ErrorAlertModal errors={apiError ? [apiError] : undefined} />
<SuccessAlertModal success={submitSuccsess} />
</Form>
);
}}
</Formik>
);
}
And Here is my Axios hook:
export function useAxios(
internal: boolean = true
): [DispatchAxios, IAxiosState] {
const { data: session, status } = useSession();
const dispatch = useDispatch();
const isMounted = useRef(true);
const user: UserState = useSelector((root: RootState) => root.user);
const env = process.env.NODE_ENV;
const { logoutUser } = useLogout();
const client = axios.create({
// baseURL: process.env.API_URL,
});
client.interceptors.request.use((config: AxiosRequestConfig) => {
config.headers = config.headers || {};
if (!config.headers["Content-Type"]) {
config.headers["Content-Type"] = "application/json";
}
if (!config.headers["Ocp-Apim-Subscription-Key"] && env === "production") {
config.headers[
"Ocp-Apim-Subscription-Key"
] = `${process.env.NEXT_PUBLIC_API_GATEWAY_KEY}`;
}
// Internal requests need tokens and other parameters added in.
if (internal) {
if (session?.accessToken) {
config.headers.Authorization = `Bearer ${session.accessToken}`;
}
}
return config;
});
const [state, setState] = useState<IAxiosState>({
loading: false,
error: null,
response: null,
success: false,
});
const dispatchAxios: DispatchAxios = useCallback(
(params: IAxiosAction) => {
const action: IAxiosAction = {
type: params.type,
config: params.config,
batchOrder: params.batchOrder || [],
};
if (params.data) {
action.data = params.data;
}
dispatch({
...action,
loading: true,
});
setState({
...state,
error: null,
response: null,
loading: true,
success: false,
});
return client(params.config)
.then((response: AxiosResponse) => {
// dispatch must come before setState
if (response.data.err === "INVALID TOKEN") {
throw action;
}
dispatch({
...action,
response,
loading: false,
});
if (isMounted.current) {
setState({
...state,
loading: false,
success: true,
error: null,
response,
});
}
return {
success: true,
error: null,
response,
};
})
.catch((error: AxiosError) => {
const originalReq = error.config;
// Token refresh failed, log user out.
if (
originalReq?.url ===
process.env.NEXT_PUBLIC_AUTH_REFRESH_API_ENDPOINT
) {
// logoutUser();
}
// dispatch must come before setState
dispatch({
...action,
error,
loading: false,
success: false,
});
if (isMounted.current) {
setState({
...state,
loading: false,
success: false,
response: null,
error,
});
}
return {
success: false,
response: null,
error,
};
});
},
[isMounted, dispatch, state, client]
);
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, [state]);
return [dispatchAxios, state];
}
The updateUser action is being used in several other parts of the app as the user is able to change and update parts of their profile. As you can see the email is being targeted in this instance. We use this same request in another page /me/settings/password&security/email and it resolves just fine no freezing no hanging. Im convin

Answer 1

It was my own import of moment.js. Dynamically importing it in a wrapping component.
Somehow it cased the issue not sure why. :)