Hydration error after Next.js and React.js version upgrade

[manjushsh]

Steps to reproduce

• Clone the project and install dependencies.
• run command yarn add next@latest react@latest react-dom@latest eslint-config-next@latest as mentioned in Next.js upgrade guide
• run yarn dev

What is expected?

Template dashboard without any error should be shown.

What is actually happening?

Facing error (Can access dashboard if we close error popup) : Error: Hydration failed because the initial UI does not match what was rendered on the server.
Reference: https://nextjs.org/docs/messages/react-hydration-error

Additional data

• NodeJS Version: v18
• Package manager(npm|yarn|pnpm): yarn
• Browser name & version: Google Chrome@latest
• System: Latest LTS Debian

[Julien-Sytadelle]

Solved it by not using nextjs 13.

[neelbrahmakshatriya]

Hi @manjushsh and @Julien-Sytadelle,

Thanks for reporting this. As @Julien-Sytadelle has pointed out, this is not updated to the latest version of Next.js 13. It is suggested to not update packages manually as it may break the template.

All the packages will be updated to the latest version in the next update along with Next.js 13 support. It will take some time and we appreciate your patience.

We have updated all the packages to their latest versions along with Next.js 13 support in the Materio Pro. If you want the latest Next.js 13 support, you may purchase our Materio Pro or wait till we release an update for the Materio Free.

[manjushsh]

Okay @neelbrahmakshatriya, Thank you

[jorcelinojunior]

@manjushsh Here is a version of the typescript-version folder updated for NextJs 13.
https://github.com/jorcelinojunior/materio-mui-react-nextjs-admin-template-free

I hope it's useful for you.

[manjushsh]

@jorcelinojunior Thank You! I will try it out.

[pratik007kumar]

hi i, am using js folder getting

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

how i can fix.

do i need to update all pulgin in package.json

FIX

comment

// const StyledLink = styled('a')({
// display: 'flex',
// alignItems: 'center',
// textDecoration: 'none'
// })
in file
src/@core/layouts/components/vertical/navigation/VerticalNavHeader.js

// ** Next Import
import Link from 'next/link'

// ** MUI Imports
import Box from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import Typography from '@mui/material/Typography'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

// ** Styled Components
const MenuHeaderWrapper = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  paddingRight: theme.spacing(4.5),
  transition: 'padding .25s ease-in-out',
  minHeight: theme.mixins.toolbar.minHeight
}))

const HeaderTitle = styled(Typography)(({ theme }) => ({
  fontWeight: 600,
  lineHeight: 'normal',
  textTransform: 'uppercase',
  color: theme.palette.text.primary,
  transition: 'opacity .25s ease-in-out, margin .25s ease-in-out'
}))

// const StyledLink = styled('a')({
//   display: 'flex',
//   alignItems: 'center',
//   textDecoration: 'none'
// })

const VerticalNavHeader = props => {
  // ** Props
  const { verticalNavMenuBranding: userVerticalNavMenuBranding } = props

  // ** Hooks
  const theme = useTheme()

  return (
    <MenuHeaderWrapper className='nav-header' sx={{ pl: 6 }}>
      {userVerticalNavMenuBranding ? (
        userVerticalNavMenuBranding(props)
      ) : (

        <Link href='/' passHref>
          {/* <StyledLink> */}
          <img width={38} height={38} alt='Neev Hr' src='/images/logo.png' />

          <HeaderTitle variant='h6' sx={{ ml: 3 }}>
            {themeConfig.templateName}
          </HeaderTitle>
          {/* </StyledLink> */}
        </Link>
      )}
    </MenuHeaderWrapper>
  )
}

export default VerticalNavHeader