[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: