Comments (10)
hi @xidedix, getComputedStyle cause SSR not rendering. Some function on SidebarNav is incompatible with Next.js
from coreui-react.
@xidedix
https://github.com/coreui/coreui-react/blob/master/src/Shared/layout/layout.js#L3
this document body breaks server side rendering
from coreui-react.
Hi @xidedix
I’ve contacted to element-closest maintainer and he had updated polyfill to work with node environment.
Your updates are also cool :)
from coreui-react.
duplicate #37
from coreui-react.
hi @zaruda
please update @coreui/react
to v2.1.2
and let us know if this works for you
from coreui-react.
@raitucarp +1
from coreui-react.
+1
from coreui-react.
I extended SidebarNav like this to make it work in NextJS/SSR:
import React from "react"
import { NavItem, NavLink } from "reactstrap"
import {
AppSidebarNav,
} from "@coreui/react"
class SidebarNav extends AppSidebarNav {
navLink = (item, key, classes) => {
const url = item.url ? item.url : ""
const itemIcon = <i className={classes.icon} />
const itemBadge = this.navBadge(item.badge)
const attributes = item.attributes || {}
return (
<NavItem key={key} className={classes.item}>
{attributes.disabled ?
<NavLink href={""} className={classes.link} {...attributes}>
{itemIcon}{item.name}{itemBadge}
</NavLink>
:
this.isExternal(url) ?
<NavLink href={url} className={classes.link} active {...attributes}>
{itemIcon}{item.name}{itemBadge}
</NavLink> :
<NavLink to={url} className={classes.link} onClick={this.hideMobile} {...attributes}>
{itemIcon}{item.name}{itemBadge}
</NavLink>
}
</NavItem>
)
}
}
export default SidebarNav
The last NavLink is incorrect (it should be something like "Link" from "next/link" i guess
It would be nice if @coreui would make a base SidebarNav and let you choose if you want to use their react-router-dom version or use something like this 😋
from coreui-react.
@xidedix
https://github.com/coreui/coreui-react/blob/master/src/Shared/layout/layout.js#L3this document body breaks server side rendering
Hello everyone. Has anyone been able to fix this?
from coreui-react.
The issue should be solved in v3
from coreui-react.
Related Issues (20)
- CModal dismisses another CModal when stacked one on top of another HOT 8
- Enable all stacked toasts to be closed HOT 3
- CFormCheck test failing HOT 1
- Context menu(right click menu) HOT 1
- Fields `_id` & `_selected` are not present after selecting rows in CSmartTable component HOT 1
- CTooltip removes the style before the hide animation completes HOT 4
- Smart Table: Column Headers Should Be Keyboard Accessible HOT 2
- Option to Show Record Count on Smart Pagination Component HOT 1
- findDOMNode is deprecated in StrictMode HOT 1
- Fix sidebar issues hapenning when changing from sidebar-narrow-unfoldable desktop to mobile HOT 3
- CModal closes if a mouseup event occurs outside the modal after clicking inside HOT 1
- after cloning the react repository, cannot "Start" - Script "Start" missing HOT 1
- Version mismatch @coreui/coreui:latest -> 4.3.2 / @coreui/react:latest -> 4.11.0 HOT 1
- CDropdownToggle disabled state behavior HOT 1
- "process is not defined" HOT 1
- CoreUI React Pro MultiSelect - incorrect component state HOT 1
- CoreUI React Pro CDatePicker - unwanted onDateChange call HOT 1
- Nav Links Not Working HOT 2
- CMultiSelect Triggers even on outside activity HOT 3
- Bug: Passing percentage units to the global abs() function is deprecated.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coreui-react.