Material UI warning with Next 14 on InputAdornment component

ken-spencer commented 1 year ago

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

[X] 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

IonVillarreal commented 1 year ago

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

ken-spencer commented 1 year ago

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 commented 1 year ago

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

Guendi commented 1 year ago

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

StanMihai commented 1 year ago

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 commented 1 year ago

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

Noir-Lime commented 12 months ago

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

Sanmeet007 commented 10 months ago

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 commented 10 months ago

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>
        ),
      },
    }),
  }}
/>

vercel / next.js