NEXT.JS getting Warning message For both for NEW issue page and EDIT issue page

app-index.js:31 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of Controller.

'use client';

import { ErrorMessage, Spinner } from '@/app/components';
import { createIssueSchema } from '@/app/validationSchemas';
import { zodResolver } from '@hookform/resolvers/zod';
import { Issue } from '@prisma/client';
import { Button, Callout, TextField } from '@radix-ui/themes';
import axios from 'axios';
import 'easymde/dist/easymde.min.css';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
// import SimpleMDE from 'react-simplemde-editor';
import { z } from 'zod';

const SimpleMDE = dynamic(() => import('react-simplemde-editor'), {
  ssr: false,

interface Props {
  issue?: Issue;

type IssueFormData = z.infer<typeof createIssueSchema>;

const IssueForm = ({ issue }: Props) => {
  const [error, setError] = useState('');
  const [isSubmitting, setSubmitting] = useState(false);
  const router = useRouter();

  const {
    formState: { errors },
  } = useForm<IssueFormData>({
    resolver: zodResolver(createIssueSchema),

  const onSubmit = handleSubmit(async (data) => {
    try {
      await'/api/issues', data);
    } catch (error) {
      setError('An unexpected error occurred.');
    } finally {

  return (
    <div className="max-w-2xl ">
      {error && (
        <Callout.Root color="red" className="mb-5">
      <form onSubmit={onSubmit} className="space-y-3">
        {/* Title */}


          render={({ field }) => (
            <SimpleMDE placeholder="Description" {...field} />


        <Button disabled={isSubmitting}>
          Submit New Issue {isSubmitting && <Spinner />}

export default IssueForm;

the issue got fixed after end of "Updating Issues " section

I’m glad to hear that he addresses this (I should have known that he would). Since he didn’t mention it at the time, I came up with solutions to fix both the ref error and also the problem of the skeletons not loading correctly for the dynamically-loaded page.

1 Like

In which section and video number is it fixed? I can’t seem to find it.

hi,so what is your solution for the ref error?

It’s been long enough that I don’t recall this issue, but I think this file may be related?

If this isn’t the right file, feel free to have a look at my repo.