Material UI warning with Next 14 on InputAdornment component #57615

ken-spencer · 2023-10-27T17:20:07Z

Link to the code that reproduces this issue

https://github.com/ken-spencer/next-bug-report

To Reproduce

Launch next.js in version 14 with "npm run dev" and look at the console. Run again with version 13 and the error goes away. I'm wondering if something has changed under the hood how files are rendered. The className differences appear to be tirggered by properties that auto detects from it's parent component. Perhaps something has change don the server side that might interfere with this detection?

Current vs. Expected behavior

Currently the console is filled with a notice. Expected would be for there to be no notice.

auto ThemeProvider.js:26:8
auto localhost:3000:1:2677
Warning: Prop className did not match. Server: "MuiInputAdornment-root MuiInputAdornment-positionEnd css-1laqsz7-MuiInputAdornment-root" Client: "MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
InputAdornment@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/InputAdornment/InputAdornment.js:88:82
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
InputBase@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/InputBase/InputBase.js:246:83
OutlinedInput@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/OutlinedInput/OutlinedInput.js:140:82
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
FormControl@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/FormControl/FormControl.js:101:82
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
TextField@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/TextField/TextField.js:98:83
form
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:44:7
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:57:7
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/styles/ThemeProvider.js:27:9
ThemeProvider@webpack-internal:///(app-pages-browser)/./src/app/Form/ThemeProvider.js:25:40
div
main
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:76
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67
InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9
ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:37
RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44
OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:220
body
html
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:297:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:158:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:441:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:127:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:143:24 app-index.js:31:21
Ignoring unsupported entryTypes: largest-contentful-paint. page.js line 2326 > eval:348:29
auto ThemeProvider.js:26:8
auto localhost:3000:1:2677
[Fast Refresh] rebuilding hot-reloader-client.js:176:24
[Fast Refresh] rebuilding hot-reloader-client.js:176:24
Source map error: Error: request failed with status 404
Resource URL:
Source Map URL: react_devtools_backend_compact.js.map

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Just used default create next app.

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

The text was updated successfully, but these errors were encountered:

IonVillarreal · 2023-11-01T22:11:24Z

Hi, is there any news about this problem? or maybe it corresponds to the MUI repository

ken-spencer · 2023-11-02T02:21:55Z

Hi, is there any news about this problem? or maybe it corresponds to the MUI repository

I'm not sure, the error does go away if I downgrade to Next 13.

jamesanthony1523 · 2023-11-02T05:39:48Z

Hi, may your MUI component display abnormally in next14? or is the component itself affecting the rendering of other elements?

Guendi · 2023-11-02T10:41:47Z

The error appeared after this PR: Add @mui/icons-material to the default optimizePackageImports list: #56801

StanMihai · 2023-11-02T16:10:24Z

I have the same issue with MUI Inputs, I have a wrapper over them and it just crashes the styling. I did not update the material-ui library, but I indeed update the NextJS version to 14.0.1 . The fix was to downgrade to 13.5.6 .

leonogas · 2023-11-09T08:26:55Z

Im getting the same error and Im not even using MUI. Just brand new default create next app.

Noir-Lime · 2023-11-28T01:23:28Z

Still getting the same error. This happens in Production for me as well.

Sanmeet007 · 2024-01-12T15:51:10Z

I am getting same error when using InputAdornment. The error goes away when InputProps is not used !

<TextField
  value={value}
  onChange={handleChange}
  fullWidth
  // ---- error  cause -----
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton onClick={addkeyword}>
          <Add />
        </IconButton>
      </InputAdornment>
    ),
  }}
/>

JanErikFoss · 2024-01-13T14:49:30Z

I'm also getting this error. My TextField is inside DateRangePicker, but same thing.

<DateRangePicker
  sx={{ flex: 1 }}
  value={dateRange}
  onChange={setDateRange}
  slotProps={{
    fieldSeparator: { sx: { display: "none" } },
    textField: ({ position }) => ({
      label: position === "start" ? t("from") : t("until"),
      InputProps: {
        sx: { backgroundColor: "white", borderRadius: "1rem" },
        endAdornment: (
          <InputAdornment position="end">
            <FontAwesomeIcon
              icon={faCalendar}
              size="lg"
            />
          </InputAdornment>
        ),
      },
    }),
  }}
/>

alexjamesmacpherson · 2025-03-14T17:42:31Z

Also seeing this issue with MUI v5.16.14 and Next.js v15.2.2

Note that it be resolved by wrapping the InputAdornment in a NoSsr component from MUI to defer rendering of the end adornment to the client-side (doesn't render on the server) thereby preventing the mismatch - see below:

import { InputAdornment, NoSsr, ... } from '@mui/material';

...

<TextField
  ...
  InputProps={{
    endAdornment: (
      // prevent SSR due to bug - https://github.com/vercel/next.js/issues/57615
      <NoSsr>
        <InputAdornment position="end">
          <IconButton onClick={submitValue}>
            <SendRounded />
          </StyledIconButton>
        </InputAdornment>
      </NoSsr>
    ),
  }}
/>

Would be good to ascertain what's causing this... 🤔 Anyone know if it's still an issue in MUIv6? Unfortunately we're currently pinned to MUIv5 due to other peer dependency constraints 😓

ken-spencer added the bug Issue was opened via the bug report template. label Oct 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material UI warning with Next 14 on InputAdornment component #57615

Material UI warning with Next 14 on InputAdornment component #57615

ken-spencer commented Oct 27, 2023

IonVillarreal commented Nov 1, 2023

ken-spencer commented Nov 2, 2023

jamesanthony1523 commented Nov 2, 2023

Guendi commented Nov 2, 2023

StanMihai commented Nov 2, 2023

leonogas commented Nov 9, 2023

Noir-Lime commented Nov 28, 2023

Sanmeet007 commented Jan 12, 2024

JanErikFoss commented Jan 13, 2024 •

edited

Loading

alexjamesmacpherson commented Mar 14, 2025

Material UI warning with Next 14 on InputAdornment component #57615

Material UI warning with Next 14 on InputAdornment component #57615

Comments

ken-spencer commented Oct 27, 2023

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

IonVillarreal commented Nov 1, 2023

ken-spencer commented Nov 2, 2023

jamesanthony1523 commented Nov 2, 2023

Guendi commented Nov 2, 2023

StanMihai commented Nov 2, 2023

leonogas commented Nov 9, 2023

Noir-Lime commented Nov 28, 2023

Sanmeet007 commented Jan 12, 2024

JanErikFoss commented Jan 13, 2024 • edited Loading

alexjamesmacpherson commented Mar 14, 2025

JanErikFoss commented Jan 13, 2024 •

edited

Loading