After using css module in parent component, Slider throws following exception
Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
The above error occurred in thecomponent:
in InnerSlider (created by Slider)
in Slider (at Slider.js:32)
...
And if I remove cssmodules decorator from parent component, then Slider works well.
Can not figure out why css module causes infinite render loop.
import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './index.css'
import Slide from 'react-slick'
// removing this line, then Slider renders well
@CSSModules(styles)
class Container extends Component {
render() {
return (
<div styleName="container">
<Slider />
</div>
)
}
}
I am also getting this problem, although providing a example might not be possible for me. However, the symptoms are the exact same as xsq007.
Edit: I tried to setup something in CodeSandBox (see here), but it doesn't seem to handle react-css-modules well.
After some investigation, I found that props.children of Slide component changed repeatedly,
which caused endless loop.
As the error stated, I removed componentDidUpdate method in InnerSlider, but the error still appeared.
Can not figure out why the children always changed.
I'm also having the same issue with react-css-modules
Look into source codes of react-css-modules,
See LinkElement method in LinkClass.js, the children props is transformed by Children.map(children).
So chilldren prop in react-slick change repeatedly.
This might not be a problem with react-slick.
your docs are shockingly bad
Using "babel-plugin-react-css-modules" instead of "react-css-module" to get rid of this issue.
@xsq007 I am using "babel-plugin-react-css-modules" and I am still facing the same issue. How were you able to make it work with it?
Most helpful comment
your docs are shockingly bad