Not working with Next.js

[brandonin]

I was able to pinpoint the issue for my build not working for this library.

"use client";

import AntDPhoneInput from "antd-phone-input";
import FormItem from "antd/es/form/FormItem";

const validator = (_: any, { valid }: any) => {
  // if (valid(true)) return Promise.resolve(); // strict validation
  if (valid()) return Promise.resolve(); // non-strict validation
  return Promise.reject("Invalid phone number");
};

const PhoneNumberInput = ({ onChange }) => {
  return (
    <FormItem label="Phone" name="phone" rules={[{ validator }]}>
      <AntDPhoneInput enableSearch onChange={onChange} />
    </FormItem>
  );
};

export default PhoneNumberInput;

When building in NextJS I receive

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: document is not defined

How I solved this was:

import dynamic from "next/dynamic";

const PhoneNumberInput = dynamic(() => import("@repo/ui/PhoneNumberInput"), {
  ssr: false,
});

const someComponent => () => {
        <PhoneNumberInput onChange={handlePhoneNumberChange} />
}

Specifically turning off SSR for this component allowed everything to work.

[ArtyomVancyan]

Yeah, it looks very natural. SSR does not have a document global variable, so turning it off should fix the problem.

[ArtyomVancyan]

Hi @brandonin, this issue must have been fixed by the latest release.

[brandonin]

thank you!