Unform: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[souza-gsdev]

Estou recebendo o erro: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Quando uso a validação no form de acordo com a documentação.

export default function AddProduct() {
  const formRef = useRef(null);

  async function handleSubmit(data) {
    try {
      formRef.current.setErrors({});

      const schema = Yup.object().shape({
        name: Yup.string().required('O nome do é obrigatório'),
        description: Yup.string().required('A descrição é obrigatória'),
        price: Yup.number()
          .typeError('Preço obrigatório')
          .required('O preço é obrigatório')
          .positive(),
        code: Yup.string().required('O código é obrigatório'),
        img_id: Yup.mixed().required('A imagem é obrigatória'),
      });

      await schema.validate(data, {
        abortEarly: false,
      });

      console.tron.log(data);

      if (data.file === undefined) {
        document.getElementById('error-file').innerHTML =
          'A imagem é obrigatória';
      }

      console.tron.log(data);
    } catch (err) {
      const validationErrors = {};

      if (err instanceof Yup.ValidationError) {
        console.tron.log(err);
        err.inner.forEach(error => {
          validationErrors[error.path] = error.message;
        });

        formRef.current.setErrors(validationErrors);
      }
    }
  }
  return (
    <ContainerProduct>
      <h1>Adicione Novo Produto</h1>
      <Form ref={formRef} onSubmit={handleSubmit}>
        <div>
          <ImgInput name="img_id" />
          <span id="error-file" />
        </div>
        <div>
          <Input name="name" placeholder="Nome" />
          <Textarea rows="10" name="description" placeholder="Descrição" />
          <Input type="number" name="price" placeholder="Preço" />
          <Input name="code" placeholder="Código" />
          <button type="submit">Enviar</button>
        </div>
      </Form>
    </ContainerProduct>
  );
}

[diego3g]

Hello @souza-gsdev, i cannot reproduce the problem here.

Can you provide a Code Sandbox with the same code with the error?

Also, keep in mind to use english as primary language inside this repository :)

[rafaelbpa]

I was with the same warning here.

Fixed exporting my input component with forwardRef (as the warning message suggest)

import React, { forwardRef } from 'react';
...
export default forwardRef(Input);

[diego3g]

Closing this since there are no updates from the author.

Feel free to reopen the issue if the problem persists.