Next.js window not defined error

[gaurangrshah]

Hey, I am trying to use formalizer in a next.js application, and I keep getting the following error:

ReferenceError: window is not defined

Below is a quick/truncated replication of my actual form showing a single input:

  Box,
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  Input,
} from "@chakra-ui/react";

import { useFormalizer } from "formalizer"; // @link https://github.com/nosachamos/formalizer
import { schema } from "@/models/schema";

export const Form = () => {
  if (!process.browser) return;
  const { formRef, useInput, errors, isValid } = useFormalizer();

  const label = "label";

  return (
    <Box as={"form"} ref={formRef}>
      <FormControl as='fieldset' isDisabled={false} isInvalid={!isValid}>
        <FormLabel htmlFor={label}>{label}</FormLabel>
        <Input {...useInput(label, ["isRequired"])} />
        <FormHelperText>We'll never share your email.</FormHelperText>
        <FormErrorMessage>{errors[label]}</FormErrorMessage>
      </FormControl>
    </Box>
  );
};

NOTE: I also tried to import it dynamically as shown here

[nosachamos]

Hi @gaurangrshah , thanks for the report.

I don't have an SSR env to test it at the moment, but until then can you define window at your index and see if things work as expected?

For example:

if (typeof window === 'undefined') {
  global.window = {}
}

It's just a temporary workaround. Formalizer itself does not reference window at all, so I'm not sure what's happening just yet.

[gaurangrshah]

Hey man thanks for the quick reply, I was really loving the syntax and the simplicity of formalizer in the docs. This makes sense I don't mind the workaround for now. Please do let me know if you do get this sorted, thanks!