Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Controller doesn't work with nextjs

See original GitHub issue

I use antd and the same example works fine with create-react-app, but nextjs crashes.

For easier code reuse, I wrote my module for the form to connect antd and react-hook-form

Sample code for using normal inputs in my module:


import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Input } from 'antd';
import { useFormContext, Controller } from 'react-hook-form';

import { useNestedProperty } from './hooks';

const { Item: FormItem } = Form;

const RenderField = ({
  input,
  label,
  type,
  name,
  placeholder,
  required,
  hasFeedback,
  addonBefore,
  addonAfter
}) => {
  const { control } = useFormContext();
  const [validateStatus, setValidateStatus] = useState('');
  const { error } = useNestedProperty(name);

  useEffect(() => {
    setValidateStatus(error ? 'error' : 'success');
  }, [error]);

  return (
    <Controller
      name={name}
      control={control}
      as={
        <FormItem
          label={label}
          validateStatus={validateStatus}
          help={error}
          required={required}
          hasFeedback={hasFeedback}
        >
          <Input
            addonBefore={addonBefore}
            addonAfter={addonAfter}
            {...input}
            placeholder={label || placeholder}
            type={type}
          />
        </FormItem>
      }
    />

  );
};

RenderField.propTypes = {
  input: PropTypes.object,
  name: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  addonAfter: PropTypes.node,
  addonBefore: PropTypes.node,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  meta: PropTypes.object,
  required: PropTypes.bool,
  hasFeedback: PropTypes.bool
};

export default RenderField;

This is how I use this code in creating a form:

import React from 'react';
import PropTypes from 'prop-types';
import { useForm, FormContext } from 'react-hook-form';
import { Form } from 'antd';
import { object, string } from 'yup';

import { RenderField } from '../../../forms';

const loginFormSchema = object().shape({
  email: string()
    .email('invalid email')
    .required('required field')
});

const LoginForm = () => {
  const methods = useForm({
    validationSchema: loginFormSchema
  });
  return (
    <div>
      <FormContext {...methods}>
        <Form onSubmit={methods.handleSubmit(data => console.log('data', data))} layout="vertical">
          <div>
            <RenderField name="email" type="text" placeholder="Your email" required />
            <RenderField name="password" type="password" placeholder="Your password" required />
          </div>
        </Form>
      </FormContext>
    </div>
  );
};

LoginForm.propTypes = {
  onLogin: PropTypes.func.isRequired,
  prevPathname: PropTypes.string
};
export default LoginForm;

And I see such an error: