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.


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.

Hi Programmist,

I have followed the instruction from your github for “Disabling server-side rendering” issue (Fix problems with new issue loading skeletons not applying uniformly · programmist/issue-tracker@f258598 · GitHub)

Now I am getting this error message:

Any idea of the issue?

Hi Nazeem,

I had the same issue and mentioned it in this post. My guess is that these attributes are added by radix-ui/themes, but fortunately it’s just a warning and won’t affect production builds.

My solution was to ignore the warning by adding the suppressHydrationWarning to the top-level html attribute:

<html suppressHydrationWarning>

There may be a better solution, but this worked for me. Supressing errors is not normally something I’d advise, but since I suspect radix-ui/themes is adding them, I’m not sure this is within our control. Maybe someone has a less janky solution?

Radix is pretty slick, but I think I prefer Chakra components. I need to try to reimplement the issue tracker with Chakra. I also need to find a better markdown editor than TinyMDE. The one chosen for this class does not integrate well with Next.js in my opinion. I just don’t see a ton of other options. If you’re aware of anything that works better please let me know. Thanks. If not, maybe that’s a good project to add to my list!

1 Like


This error seemed to go away for me during the “Improving the Loading Experience” section