Controller doesn't work with nextjs

[StKostyantin]

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:

Right now I'm using "next": "^ 9.2.2" and "react-hook-form": "^ 4.9.8"

[bluebill1049]

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

try to comment out the above code and see if the errors goes away.

[gordysc]

I was able to repro this issue as well, it looks like the issue was introduced somewhere between RHF v4.9.6 and v4.9.8. It does work (for me) w/ 4.9.6.

[bluebill1049]

oh thanks @gordysc I will investigate on this issue. can you share a simple codesandbox with nextjs?

[bluebill1049]

I shouldn't work with CRA as well, it's strange... I am sure there is something that I have broked.

[gordysc]

@bluebill1049 sure! I've created a basic repo to show the issue:
https://github.com/gordysc/rhf-example

Note: If you change ^4.9.6 to 4.9.6, blow away node_modules and yarn.lock to force 4.9.6, it'll work... but w/ 4.9.8, it causes the issue above. Thanks for the fast response!

[bluebill1049]

thanks @gordysc i will take a look at during lunchtime or tonight.

[sdornan]

Looks like 4.9.7 is okay too, so the bug seems to have been introduced in 4.9.8.

[bluebill1049]

Thanks @sdornan I think I know the root cause of this one, will try to send out a beta version for the fix when I am arriving at the office.

[bluebill1049]

can you guys plz help test this one: react-hook-form@4.9.9-beta.1?

[gordysc]

Works great for me! I imagine you tested this against my repo though, so would be interested to hear if it works for others. Thanks for the super fast turn around!

[bluebill1049]

no worries @gordysc. one more confirm i will merge the PR, i will probably release this fix over the weekend, cause i have merge a new feature last weekend, need a bit more testing on it before let it out.

[StKostyantin]

can you guys plz help test this one: react-hook-form@4.9.9-beta.1?

Thanks, works great for me!

[bluebill1049]

Thanks @StKostyantin will release the minor version this weekend.