React-slick: Slide initializes with width:0, how to solve it without using JQuery?

[Carson12345]

when I reload my page, the content all reinitializes with width:0, I am aware that manually resizing the browser will solve but I have a limitation that I cannot write JQuery to force the window to resize as I am making a component.

Can I do something like $(window).trigger('resize'); in React but without using JQuery please?

My code now is

`render() {
const settings = {
dots: true,
arrows: true,
}

    return <div className={ rowClass.join(' ') }>
               <div className='sk-msg-wrapper'>
                   <div className={ containerClasses.join(' ') }
                        style={ style }
                        ref='messageContent'
                        onClick={ this.onMessageClick.bind(this) }>

                       { hasItems ? <div className={ cardListClasses.join(' ') }>
                            <Slider {...settings}>

                                          { cardList }

                             </Slider>
                                      </div>: null }

                   </div>`

[MatanBobi]

Are you trying to use slider inside a flex container?

[Carson12345]

@MatanBobi so much thanks for your reply!!

The container css is as following:

<div className="sk-message-item-card">
                            <Slider {...settings}>
                                          { cardList }
                             </Slider>
                         </div>

.sk-row {
    clear: both;
    padding-bottom: 0px;
    padding-top: 2px;
    .sk-msg-wrapper {
        display: inline-block;
        border-bottom-left-radius: 2px;
        max-width: 100%;
        position: relative;

        .sk-message-item-card {
            padding: 8px 28px 10px 28px;
         }
    } 
}

[raymondsze]

I run into same issue.
The line 34 of helper.js

    if (!props.vertical) {
      var centerPaddingAdj = props.centerMode && parseInt(props.centerPadding) * 2;
      slideWidth = (this.getWidth(_reactDom2.default.findDOMNode(this)) - centerPaddingAdj) / props.slidesToShow;
    } else {
      slideWidth = this.getWidth(_reactDom2.default.findDOMNode(this));
    }

The _reactDom2.default.findDOMNode(this) is null.
I am not sure where goes wrong. I am using React 16.

[Carson12345]

@raymondsze same, I am currently hardcoding this part but am trying to find out a solution too. Anyone else face the same issue?

[raymondsze]

I copy the helper.js and doing something workaround by changing
_reactDom2.default.findDOMNode(this) to _reactDom2.default.findDOMNode(this.list)
and then do some hacky thing to replace the require cache

require('react-slick/lib/mixins/helpers');
require.cache[require.resolve('react-slick/lib/mixins/helpers')].exports.default = helpers;

Make sure you import the rewired helpers before import Slick from 'react-slick'.

I think this.list is not correct, but its just enough for my usecase.

I guess it is caused by React 16. Mixins is a very old way and not recommend nowadays... I am not sure is this repository still actively maintained.

I also using other library react-container-dimensions which have similar issue on findDOMNode after changed to React 16.

[Carson12345]

@raymondsze So much thanks for sharing this workaround!
Though my case is that my reactDOM cant get any width including this.list, your insights have already helped me a lot.

[Carson12345]

@raymondsze excuse me, may I know where should I put the below lines in order to use the copied helper.js please?

require('react-slick/lib/mixins/helpers');
require.cache[require.resolve('react-slick/lib/mixins/helpers')].exports.default = helpers;

I now put the copied helper.js file at src/js/utils/ , should I put the above two lines into the end of the new helper.js file? or at the beginning of the file that I will be importing 'react-slick' please?

I am now importing with
import helpers from '../utils/react-slick/helpers';

Sorry for not being familiar with cache replacing, I am looking for other references/tutorial on it online too!:)

Thank you so much!

[raymondsze]

Put these script to the end of src/js/utils/helper.s

require('react-slick/lib/mixins/helpers');
require.cache[require.resolve('react-slick/lib/mixins/helpers')].exports.default = helpers;

then before you import Slick from 'react-slick', do this.

import '../utils/react-slick/helpers';
import Slick from 'react-slick';

In NodeJS environment, all your required stuff would be stored inside require.cache.
For example, you do import Slick from 'react-slick'; actually is same as following

const _Slick = require('react-slick');
const Slick = _Slick.__esModule ? _Slick.default : _Slick

(here default mean its an ES6 module, which usually come with __esModule: true)

After that, the Slick will stored into require.cache[require.resolve('react-slick')]
(here require.resolve mean resolve the 'path' of your required module, it would be something like node_modules/react-slick/index.js)

Next time you do import Slick from 'react-slick'; actually is same as following

const _Slick = require(require.resolve('react-slick')).exports;
const Slick = _Slick.__esModule ? _Slick.default : _Slick

So to replace the cache

const _Slick = require('react-slick');
const Slick = doSomeStuff(_Slick);
require.cache[require.resolve('react-slick')].exports.default = Slick;

How about forcing node to require the module again but not from cache?
Its easy

delete require.cache[require.resolve('react-slick')];

Hope the above is helpful for understanding how require.cache works.

[Carson12345]

@raymondsze
Thank you so much for the guidance and teaching here!!! I have had a great lesson, as a beginner I had a hard time understanding the search results of require.cache myself but your explanation make me understand it so comfortably. Thanks again for your sharing!

also in my case, I faced a little issue while run building as it cannot locate the trackHelper file, then I changed

var _trackHelper = require('trackHelper');

to

var _trackHelper = require('react-slick/lib/mixins/trackHelper');

to make it work in my case. Just to share my case here if it would be useful for other users:)

[eranhirs]

I run into the same problem, #809 has a similar problem, here is the solution that seems to work
https://github.com/akiran/react-slick/issues/809#issuecomment-325807788

[laveesingh]

We are now using resize-observer-polyfill to observe any kind of resizing. That solves the problem of updating track style. 8591dace983fa1bc103964459ab99eaa34eed8de