[TextField] Without id raise warnings with Next.js App Router

[tippfelher]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Here is the repository to reproduce the problem: https://github.com/tippfelher/nextjs13-app-dir-mui-textfield

import TextField from '@mui/material/TextField';

export default function Home() {
  return <TextField />;
}

Current behavior 😯

Warning: Prop id' did not match. Server: ": R219mcq:" Client: ": Ral6pj9:"

client and server generate random ids for the textfield which (obviously) never match and cause said error:

Expected behavior 🤔

Client and server generate the same id, and no warnings.

[oliviertassinari]

This is a bug in Next.js: vercel/next.js#48284.

[tippfelher]

Thank you for the quick response. It looks like the issue described there. I.e. client and server trees don't match => useId() on client and useId() on server don't match => nothing mui can do here right? Feel free to close this issue then and sorry for the bug report. (:

[oliviertassinari]

I can reproduce with Next.js v13.4.12 and:

TextField.tsx

'use client'
import * as React from "react";

export default function TextField() {
  const id = React.useId();
  return <div id={id} />;
}

nothing mui can do here right?

As a workaround, you can provide your own id to solve the hydration:

import TextField from '@mui/material/TextField';

<TextField id="my-id" />

Otherwise, we could have this workaround:

diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts
index 6ea0324964..403b7b9a42 100644
--- a/packages/mui-utils/src/useId/useId.ts
+++ b/packages/mui-utils/src/useId/useId.ts
@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import ponyfillGlobal from '../ponyfillGlobal';

 let globalId = 0;
 function useGlobalId(idOverride?: string): string | undefined {
@@ -27,7 +28,11 @@ const maybeReactUseId: undefined | (() => string) = (React as any)['useId'.toStr
  * @returns {string}
  */
 export default function useId(idOverride?: string): string | undefined {
-  if (maybeReactUseId !== undefined) {
+  // Next.js app directory is buggy https://github.com/vercel/next.js/issues/48284
+  // ignore if ponyfillGlobal.next.appDir === true (client side)
+  // or ponyfillGlobal.__RSC_MANIFEST is defined (server side)
+  // eslint-disable-next-line no-underscore-dangle
+  if (maybeReactUseId !== undefined && ponyfillGlobal.next?.appDir !== true && !ponyfillGlobal.__RSC_MANIFEST) {
     const reactId = maybeReactUseId();
     return idOverride ?? reactId;
   }

but I don't know, feels like this is too Next.js specific, and that server-side, the id is still missing, so a warning help knowing where one is missing.

[tippfelher]

I think Material UI should NOT fix this, instead we should add a message to the Next.js App Router page. Similar to:

[oliviertassinari]

Then I think we can use this GitHub issue as docs, wait for upvotes, and document it if it's raised often enough. We have so many issues open that it's not clear to me if it's worth the opportunity cost yet.