Error in console ‘DialogContent’ requires ‘DialogTitle’ (NextJs, ReactJs, ShadCN/UI)

Question

I keep getting this error even though I’ve went through my project multiple times and made sure every DialogContent component had a DialogTitle within it and they all do.

I’ve checked all of my imports to make sure they’re all from ShadCN and I didn’t accidentally import any from Radix and they’re all correct.

There are multiple files like this one, but as stated they all have both the DialogContent and DialogTitle components and the imports are correct :

<Dialog open={isModalOpen} onOpenChange={handleClose}>
      <DialogContent
        className='bg-white text-black p-0 overflow-hidden'
        aria-describedby='create-channel'
      >
        <DialogHeader className='pt-8 px-6'>
          <DialogTitle
            id='create-channel'
            className='text-2xl text-center font-bold'
          >
            Create Channel
          </DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
            <div className='space-y-8 px-6'>
              <FormField
                control={form.control}
                name='name'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className='uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70'>
                      Channel Name
                    </FormLabel>
                    <FormControl>
                      <Input
                        disabled={isLoading}
                        className='bg-zinc-300/50 border-0 focus-visible:ring-0 text-black focus-visible:ring-offset-0'
                        placeholder='Enter Channel Name...'
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name='type'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Channel Type</FormLabel>
                    <Select
                      disabled={isLoading}
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger className='bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 focus:ring-offset-0 capitalize outline-none'>
                          <SelectValue placeholder='Select a Channel Type' />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {Object.values(ChannelType).map((type) => (
                          <SelectItem
                            key={type}
                            value={type}
                            className='captialize'
                          >
                            {capitalizeFirstLetterOfEachWord(
                              type.toLowerCase()
                            )}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <DialogFooter className='bg-gray-100 px-6 py-4'>
              <Button variant={'primary'}>Create</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>

Here is the console error:

react_devtools_backend_compact.js:13851

`DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.

If you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.

For more information, see https://radix-ui.com/primitives/docs/components/dialog

Answer 1

remove id='create-channel' from DialogTitle to resolve error

and then add < DialogDescription > to resolve warning

then aria-describedby='create-channel' is not need