React-slick: Not work with css module

Created on 22 May 2018  路  8Comments  路  Source: akiran/react-slick

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 the component:
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>
    )
   }
}

Most helpful comment

your docs are shockingly bad

All 8 comments

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?

Was this page helpful?
0 / 5 - 0 ratings