themeselection / materio-mui-nextjs-admin-template-free

An enterprise-grade Next.js admin dashboard template. Made with developer experience first: Next.js v14 (App Router), Material UI (MUI), Tailwind CSS, TypeScript, ESLint, Prettier, VSCode Configs !! 🚀
https://themeselection.com/item/materio-free-mui-nextjs-admin-template
MIT License
1.65k stars 568 forks source link

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

Closed manjushsh closed 5 months ago

manjushsh commented 1 year ago

Steps to reproduce

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

Image

Additional data

Julien-Sytadelle commented 1 year ago

Solved it by not using nextjs 13.

neelbrahmakshatriya commented 1 year ago

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

Okay @neelbrahmakshatriya, Thank you

jorcelinojunior commented 1 year ago

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

@jorcelinojunior Thank You! I will try it out.

pratik007kumar commented 1 year ago

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
SmartChain-AI commented 5 months ago

Thankyou pratik007kumar for pointing me in the right direction, but a better way to solve the hydration error is to remove Link completely and put it's parameters inside of StyledLink, like so :

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)
      ) : (
          <StyledLink href='/' passHref>
             <img width={38} height={38} alt='Neev Hr' src='/images/logo.png' />
             <HeaderTitle variant='h6' sx={{ ml: 3 }}>
                  {themeConfig.templateName}
             </HeaderTitle>
          </StyledLink>
      )}
    </MenuHeaderWrapper>
  )
}

export default VerticalNavHeader

you can see that the problem was Link is actually an <a> tag, and so is StyledLink. So the error stems from having the following nesting ie. an <a> element inside of an <a> element

<a href="/">
   <a>
   ...more code here
   </a>
</a>

if you still get the hydration error after applying this fix, go to line 71 of /src/@core/layouts/components/vertical/navigation/verticalnavlink.js and change component={'a'} to component={'div'} to supress the error for the time being. I'm pretty sure the same thing is happening in that file but haven't checked it out properly yet.

neelbrahmakshatriya commented 5 months ago

Hello everyone,

Great news! We've rolled out a new version that includes the Next.js v14 App Router.

Please go ahead and give it a try. We're confident that the issue you've been experiencing should now be resolved in this latest update.

I'm going to close this thread since the issue is fixed in the new version, but don't hesitate to open a new issue if you encounter any problems. Your feedback is always welcome!