siriwatknp / mui-treasury

A collection of ready-to-use components based on Material-UI
https://mui-treasury.com
MIT License
2.38k stars 151 forks source link

Not work EdgeSidebar with SSR #1195

Closed AkioSarkiz closed 9 months ago

AkioSarkiz commented 2 years ago

Example code:

 <Root scheme={preset}>
      <EdgeSidebar anchor={'left'}>
        {'content'}
      </EdgeSidebar>
    </Root>
barthicus commented 1 year ago

@AkioSarkiz Depending on stack/framework you use you can fix this by importing EdgeSidebar in SSR disabled mode.

Eg. in Next.js you can import this component like this:

import dynamic from 'next/dynamic'
import { Root, Header, ..... } from '@mui-treasury/layout'

const EdgeSidebar = dynamic(() => import('@mui-treasury/layout').then(mod => mod.EdgeSidebar), { ssr: false })

Then you can use EdgeSidebar like regular React component in your layout.

Not sure if there is a better way to fix this. Probably there is something wrong in lib and @siriwatknp don't have time to fix this. Sometimes these kind of hacks are the only way to proceed with projects.