Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NextJS Warning: Prop `aria-describedby` did not match.

See original GitHub issue

Describe the bug When using next.js and adding Tooltip component, it displays this error:

Warning: Prop aria-describedby did not match. Server: “evergreen-tooltip-192” Client: “evergreen-tooltip-1”

To Reproduce Steps to reproduce the behavior:

Open new NextJS project
Install evergreen-ui
Use <Tooltip /> component.

Evergreen Version 4.27.4

Environment (please complete the following information):

OS: windows
Browser chrome

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

ethanmickcommented, Aug 18, 2021

Just ran into this as well. Would it be okay to add an id prop instead of generating one?

2reactions

Chrischuckcommented, Jun 1, 2020

This happens because of SSR.

Under the hood, evergreen will automatically generate the aria-describedby attribute. It’ll be generated once on the server and once on the client and unfortunately this is pretty much the default behavior with any SSR app.

Unfortunately, it doesn’t look like you can manually set this (which would alleviate the problem). See here. The aria-describedby is derived from this id, ideally, you’d be able to put an id onto the tooltip and override this.

I can make a pr to add an override prop if you are fine with passing this id explicitly to fix this issue

Top Results From Across the Web

Prop `aria-current` did not match. Server: "null" Client: "page"

Here is how I have set up the router: import React from 'react' import { navbar } from './navbar ...

Select warns about specifying an aria-label

When i use Select component, it keep gives me a error message “If you do not provide a visible label, you must specify...

Invalid ARIA Prop Warning - React

The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the...

ARIA1: Using the aria-describedby property to provide ... - W3C

The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive ...

Popover - Chakra UI

Popover is a non-modal dialog that floats around a trigger. ... Ensure you set `closeOnBlur` prop to false so it doesn't close on...