yaodingyd / react-flickity-component Goto Github PK

If you render a carousel, then replace children with new images, imagesloaded is not used, so new carousel will be sized incorrectly

In componentDidUpdate, I added an imagesLoaded to make sure the carousel sizes are recalculated with reloadCells. There are probably some optimizations to not run it on every update, but that's the gist of it. Maybe it should only run on children changes.

https://github.com/theolampert/react-flickity-component/blob/96a209e61e9b8152e17f5756441bd23b9baf2d79/src/index.js#L19-L39

  componentDidUpdate(prevProps, prevState) {
    const {
      children,
      options: { draggable, initialIndex },
      reloadOnUpdate,
    } = this.props;
    const { flickityReady } = this.state;
    if (reloadOnUpdate || (!prevState.flickityReady && flickityReady)) {
      this.flkty.deactivate();
      this.flkty.selectedIndex = initialIndex || 0;
      this.flkty.options.draggable =
        draggable === undefined
          ? children
            ? children.length > 1
            : false
          : draggable;
      this.flkty.activate();
// --- ADDED
      if (!disableImagesLoaded && this.carousel) {
        imagesloaded(this.carousel, () => {
          this.flkty.reloadCells();
        });
      }
// ---
    } else {
      this.flkty.reloadCells();
    }
  }

I'm trying to add cells dynamically by mapping a state object and remapping after an ajax call ends:

export default class Reviews extends Component {
   constructor(props) {
      super(props);
      this.state = {
         reviewjson: [
            {
               id: 0,
               name: 'Loading...'
            }
         ]
      };
   }
   componentDidMount() {
      getJSON(this.props.dataURL, (err, data) => {
         if (err !== null) {
            alert('error');
            }
         } else {
            this.setState({reviewjson: data.reviews});
         }
      });
   }
   componentDidUpdate() {
      console.log('foi');
   }
   render() {
      const flickityOptions = {
         cellSelector: '.review',
      }
      return (
         <div className="carousel-holder">
            <Flickity options={flickityOptions} reloadOnUpdate >
               {this.state.reviewjson.map(i => (
                  <Cell className="review" key={i.id} name={i.name} />
               ))}
            </Flickity>
         </div>
      )
   }
}

However, what I get rendered after the ajax call is something like this:

<div class="flickity-enabled is-draggable" tabindex="0">
   <div class="flickity-viewport" style="height: 175px; touch-action: pan-y;">
      <div class="flickity-slider" style="left: 0px; transform: translateX(27.43%);">
         <Cell class="review">...</Cell>
      </div>
   </div>
   <Cell class="review">...</Cell>
   <Cell class="review">...</Cell>
   <Cell class="review">...</Cell>
   <Cell class="review">...</Cell>
   <Cell class="review">...</Cell>
</div>

I mean, if I have more cells in the remap than I had before, they're added outside the viewport and the slider. And if I have less cells in the ajax call than I had before, I got an error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Is it a bug or am I doing something wrong?

I'm trying to render this carousel component on Small viewports, and a plain list in other viewports.
I'm using window.matchMedia to render one or the other component

import React, { PureComponent } from "react";
import { render } from "react-dom";
import Flickity from "react-flickity-component";

const flickityOptions = {
  initialIndex: 1,
  pageDots: false
};
const smMedia = window.matchMedia("(max-width: 650px) and (min-width: 0px)");

class Carousel extends PureComponent {
  constructor() {
    super();
    this.state = {
      carousel: false
    };
  }

  componentDidMount() {
    smMedia.addListener(this.onSmall);
    smMedia.addListener(x => console.log("Fired?", x.matches));
  }

  onSmall = ({ matches }) => {
    this.setState({
      carousel: matches ? flickityOptions : false
    });
  };

  render() {
    const { carousel } = this.state;

    if (carousel) {
      return (
        <Flickity options={carousel}>
          <img src="http://via.placeholder.com/50x50" />
          <img src="http://via.placeholder.com/50x50" />
          <img src="http://via.placeholder.com/50x50" />
          <img src="http://via.placeholder.com/50x50" />
          <img src="http://via.placeholder.com/50x50" />
        </Flickity>
      );
    }

    return (
      <div style={{ border: "1px solid", padding: 10 }}>
        Plain List No {this.props.number}
      </div>
    );
  }
}

const Wrapper = () => {
  return (
    <div>
      <Carousel number={1} />
      <Carousel number={2} />
    </div>
  );
};

render(<Wrapper />, document.getElementById("root"));

in Safari only - The second list is not able to change to the carousel, without any errors anywhere.

See this live example: https://codesandbox.io/s/5409mo1qkx

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

This doesn't look right. Besides we already have the check in componentDidMount lifecycle.

Originally posted by @yaodingyd in #71 (comment)

NO, This is right. in SSR componentDidMount do not effect JUST 'constructor' and 'render' work.

you must ignore import window dependency plugins to fix 'window undefined' error. in this commit i ignored flickity to fix it. now we can use in both side.

`render() {
const flickityOptions = {
initialIndex: 0,
autoPlay: 10000,
prevNextButtons: false,
adaptiveHeight: false,
wrapAround: true
}

    return (
        <div className={this.props.cssClasses}>
            {
                this.props.blockData.messages.length ? 
                    <Flickity
                        className={'slide-wrap'} // default ''
                        elementType={'div'} // default 'div'
                        options={flickityOptions} // takes flickity options {}
                        disableImagesLoaded={false} // default false
                        reloadOnUpdate={true} // default false
                        static // default false
                        >
                    
                        {this.props.blockData.messages.map((message, key) =>
                            <div className={"community-message__row " + message.type} key={key}>
                                {message.title ? <p className="community-message__row__title">{message.title}</p> : ""}
                                <img alt={message.title} src={message.image}/>
                                {message.message ? <p className="community-message__row__message">{message.message}</p> : ""}
                            </div>
                        )}
                    </Flickity>
                    :
                    ""
            }
        </div>
    );
}`

I have an app that pulls from an api at an interval, and every once in a while on an app data update, I get this error. I looked at #41 but didn't find any answers there. I'm confused as to how to implement "Run reloadCells and resize on componentDidUpdate" if that is the solution.

https://github.com/theolampert/react-flickity-component#example-usage

Broken Link: https://github.com/artsy/reaction/blob/master/src/Components/v2/CarouselV3.tsx#L160-L171

opened this issue on stackoverflow:
https://stackoverflow.com/questions/59724659/flickity-carusel-no-control-over-margin-between-images-in-carusel

the problem is i have no control over the the spcae between images in the carusel when resizing the browser window: https://codesandbox.io/s/flickity-changin-margin-example-s5gws

even after adding margin right to each carusel-cel https://codesandbox.io/s/flickity-changin-margin-example-yk0xj the space between two images is inconsistent after resizing the browser window

before resize:

after resize:

Since the 2.0.0 version of this component, the initialIndex property is not working:

import React from "react";
import { render } from "react-dom";
import Flickity from "react-flickity-component";

const flickityOptions = {
  initialIndex: 7
};

function Carousel() {
  return (
    <Flickity options={flickityOptions}>
      <img src="http://via.placeholder.com/50x150" />
      <img src="http://via.placeholder.com/100x150" />
      <img src="http://via.placeholder.com/150x150" />
      <img src="http://via.placeholder.com/250x150" />
      <img src="http://via.placeholder.com/300x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
    </Flickity>
  );
}
render(<Carousel />, document.getElementById("root"));

See the live example: https://codesandbox.io/s/lljo6rkx2q

Some older browsers and tools do not support ES6. Also it is not currenty supported by create-react-app, which I think will be the main problem for most of us.
Is there a chance to precompile the package before publishing?
Thanks!

I'm trying to get the current index of the slides. So, my first attempt is using something like "onChange". But I see it's not supported in the Props interface:

interface Props {
    className?: string;
    disableImagesLoaded?: boolean;
    elementType?: string;
    flickityRef?: (ref: Flickity) => void;
    options?: FlickityOptions;
    reloadOnUpdate?: boolean;
    static?: boolean;
}

I tried passing the event an an option, with no luck:

const flickityOptions = {
    contain: true,
    pageDots: false,
    cellAlign: 'left',
    onChange: (i) => console.log('index', i)
  }

Any clue?

This might not be related to this library, but as the flickity-fullscreen package hasn't been updated for a year, just decided to post here.

We are using flickity in one of our projects, and added the package for fullscreen flickity-fullscreen, it had been working for a while, but like a month ago it suddenly stopped working, and when we call
this.flkty.toggleFullscreen();

it returns:
TypeError: _this2.flkty.toggleFullscreen is not a function

As I said, it worked before, and we never changed our code

this.flkty.previous(); or this.flkty.next(); still work smoothly.

Any clues?

Related #7

There have been updates to the react monorepoundefined

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Hi,
thanks for this good library.
I need RTL support. Does it support ?

Hi, your implementation of flickity is awesome, but I would like to know how to rebuild the slider after destroying it?
I understand that through flickityRef, but I have not succeeded in instantiating the slider again.

Any idea?

The devDependency prettier was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

@theolampert

I can't say I have tested this myself but have you taken a look at this comment on the flickity repo regarding React 16 and portals?

metafizzy/flickity#488 (comment)

I'm just curious if that is relevant to your code here or if the approach that you have taken has pros/cons that make it a better choice.

Thanks,
Ryan

On Firefox 68.0.2 Flickity is only loading images after the browser window is resized. Tested locally and in the official sandbox https://codesandbox.io/s/qlz12m4oj6. Can anyone confirm? How would I manually trigger a resize Event once the images or the slider is loaded?

Since the 3.0.0 version of this component, the component is not longer draggable.

import React from "react";
import { render } from "react-dom";
import Flickity from "react-flickity-component";

const flickityOptions = {
  initialIndex: 7
};

function Carousel() {
  return (
    <Flickity options={flickityOptions}>
      <img src="http://via.placeholder.com/50x150" />
      <img src="http://via.placeholder.com/100x150" />
      <img src="http://via.placeholder.com/150x150" />
      <img src="http://via.placeholder.com/250x150" />
      <img src="http://via.placeholder.com/300x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
      <img src="http://via.placeholder.com/350x150" />
    </Flickity>
  );
}
render(<Carousel />, document.getElementById("root"));

See the live example: https://codesandbox.io/s/p7m7w45yl7

This would allow controlling the carousel using custom UI for next and previous

Hello, small problem with version 3.4.0 of the package. It doesn't seem to impact the rendering, but the error is still present. I didn't find out where this error came from.

version 3.5.0 produces a webpack error and simply switching to an older version fixes it

In index.d.ts type of flickityRef is HTMLDivElement. It is wrong. It makes troubles on binding events or something else, using refference.

<Flickity flickityRef={ref => (this.flkty = ref)} />
...
this.flkty.on("select", () => {
  console.log(`current index is ${this.flkty.selectedIndex}`);
});

Property 'on' does not exist on type 'HTMLDivElement'.

Wonder if you could help me out with something - I need to focus flickity on mount (so keyboard nav can be use right away) as per https://codepen.io/desandro/pen/JoemRR but I'm struggling.

const flickity = useRef(null);

useEffect(() => {
    if (flickity.current) flickity.current.element.focus();
  }, [flickity.current]);

<Flickity
    className="EntryHeroSlideshow__cells"
    options={flickityOptions}
    flickityRef={c => (flickity.current = c)}
    static
>
    [...]
</Flickity>

On page load, document.activeElement is the body element.

Any ideas where I'm going wrong?

Just a heads-up for anyone who may be trying to use this in a SSR-framework that it may fail.

I was trying to use this component to integrate Flickity in my Gatsby build. While it works when I do a local develop instance, it fails on a local build as well as on my CI.

Gatsby returns:

TypeError: Cannot read property 'path' of undefined

 - build.js:68 buildHTML.catch.err
    [my-project]/[gatsby]/dist/commands/build.js:68:72
 - util.js:16 tryCatcher
    [my-project]/[bluebird]/js/release/util.js:16:23

    etc...

In my case, there's an issue thread over at Gatsby that indicates that an import's SSR-compatibility could likely be the issue: gatsbyjs/gatsby#11464

Hi, I just setup a PoC using this library and all went OK following the setup guide, the carousel works perfectly and the implementation was really easy.

I''m however getting an error when transitioning back-and-forth between the view where the carousel lives and other ones:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I am using a mix of angularJS + uiRouter and React right now, but I'm not sure it has to do with the stack itself. I wonder if I need to make something happen on componentWillUnmount to make sure all references to DOM elements used by flickity are purged (flickity.destroy()?).

From the stack trace the error seems to stem from FlickityComponent.

Hi!

I am using the component inside of a modal, everything is working, arrows and dots are here but all the images are stacked on top of each other. If I resize the window it fixes itself. Following the API on flickity's website, I read that I need to use resize() when I reveal the slider

Function run onClick

function openModal(){
    var carousel = document.querySelector('.carousel');
    var flkty = new Flickity( carousel );
    document.getElementById('modal').style.display = 'flex';
    flkty.resize();
}

Options

const flickityOptions = {
    initialIndex: 0,
    imagesLoaded: true
}

Slider

<Flickity 
  id='test'
  className={'carousel'} // default ''
  elementType={'div'} // default 'div'
  options={flickityOptions} // takes flickity options {}
  disableImagesLoaded={false} // default false
  reloadOnUpdate={true}// default false
>
  {post.frontmatter.images.map(({ publicURL, id }) => (
  <CarouselCell key={id} id={id}>
    <img src={publicURL} alt="" />
  </CarouselCell>
  ))}
</Flickity>

I get flkty.resize is not a function.

I am no JavaScript expert and I am new to React so I apologies in advance if this is a stupid question

Thanks for the react flickity component. I am getting below error when I try to build with npm run build command.

ERROR in 0.87a941d054f3f7a31f25.chunk.js from UglifyJs
Unexpected token: name (src_FlickityComponent) [0.87a941d054f3f7a31f25.chunk.js:1079,6]
Child html-webpack-plugin for "index.html":
1 asset

build script I am using is : cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout

If I remove -p option then build is successful. Is react flickity component supported by wedpack module? . I am using react boilerplate module to develop my application. Please advice?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Version 0.3.3 of babel-plugin-add-module-exports was just published.

This version is covered by your current version range and after updating it in your project the build failed.

babel-plugin-add-module-exports is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Is it possible to use this component with flickity-fullscreen pack?

[email protected]
├── [email protected] 
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

as you can see, fbjs 1.0.0 (Sep 18, 2018) related to core-js 2, but fbjs v2.0.0 (Sep 23, 2019) released. maybe it's time to update the dependencies?

Thanks for creating this component!

I'm trying to implement desandro's equal cell height hack, explained here and shown here.

Here is the hack:

// external js: flickity.pkgd.js

// add this code
Flickity.prototype._createResizeClass = function() {
  this.element.classList.add('flickity-resize');
};

Flickity.createMethods.push('_createResizeClass');

var resize = Flickity.prototype.resize;
Flickity.prototype.resize = function() {
  this.element.classList.remove('flickity-resize');
  resize.call( this );
  this.element.classList.add('flickity-resize');
};

I'm having trouble adapting this code to work with react-flickity-component. My attempt (shown below) is partially working, but causes an issue on first load that makes it seems like there is only one cell (the arrows are disabled and the dots don't appear). This behaviour fixes itself as soon as the carousel moves.

componentDidMount = () => {
    // See: https://codepen.io/desandro/pen/ZXEGVq
    this.flkty.element.classList.add(`flickity-resize`)

    const resize = this.flkty.resize
    this.flkty.resize = () => {
      this.flkty.element.classList.remove(`flickity-resize`)
      resize.call(this)
      this.flkty.element.classList.add(`flickity-resize`)
    }
  }

Can you please show me how to implement desandro's hack with this component?

When trying to render this on the server I get -

ReferenceError: window is not defined
  at Object.<anonymous> (/home/nodejs/app/node_modules/flickity/js/index.js:39:5)

If we follow a <Link /> from React Router the view to which the app is routed is not rendered. The HTML body is empty.

The full error message is:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This is not a big deal but after i use this component, in chrome i can see this warning

DevTools failed to parse SourceMap: js/index.js.map

and i dont have index.js in my source..
I know i can turn off Enable Javascript source map in chrome setting but..
can fix this?

Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Getting this issue when component is getting reloaded

I am using React-Flickity component and in mobile it works fine and in desktop it doesn't work and destroy not triggering
And one more isssue is not able to set the maximum height of a cell across all other cells

import React, { Fragment, Component } from "react"
import classNames from "classnames"
import PropTypes from "prop-types"
import Flickity from 'react-flickity-component'

//import GenericCarousal from "../Carousel/Carousel"
import { getCard, getHeading, getRichText } from "../../helpers/uiHelper"
import ProductCarouselCard from "../CardType/ProductCarouselCard"
import AthleteCard from "../CardType/AthleteCard"
import CarouselSetting from "./CarouselSetting"

import "flickity/css/flickity.css";

import cstyles from "../BrandCarousel/Carousel-tw-styles"
import { getImageUrl, getSrcSet } from "../../adapters/cloudinary.adapters"

class Carousel extends Component {
constructor(props) {
super(props)
this.state = {
swiping: false
}
}

flkty = null;
componentDidMount (){
const resize = this.flkty.resize
this.flkty.resize = () => {
this.flkty.element.classList.remove('flickity-resize')
resize.call(this.flkty)
this.flkty.element.classList.add('flickity-resize')
}
}
componentDidUpdate() {
if(this.flkty){
this.flkty.reloadCells()
}
}

componentWillUnmount() {
if (this.flkty) {
  this.flkty.destroy();
}

};
render() {
const { carousel } = this.props
const flickityOptions = {
cellAlign: 'left',
pageDots: false,
selectedAttraction: 0.01,
friction: 0.2,
arrowShape: false,
// watchCSS: true,
//setGallerySize: false,
}
const carouselStyle = carousel.styles && carousel.styles.trim()

    return (
        <Fragment>
            <div
                className={classNames(
                    cstyles[carouselStyle] && cstyles[carouselStyle].heading
                )}
            >
                {carousel.titleCollection &&
                    carousel.titleCollection.items.map(title => {
                        switch (title.__typename) {
                        case "Heading":
                            return getHeading(title)
                        }
                    })}
            </div>
            <div
                className={classNames(
                    cstyles[carouselStyle] &&
                        cstyles[carouselStyle].carouselWrapper
                )}
            >
                    <Flickity className={"slider"} options = { flickityOptions }   flickityRef={c => this.flkty = c}>
                    {carousel &&
                        carousel.carouselPanelsCollection &&
                        carousel.carouselPanelsCollection.items.map(
                            (panel) => { 
                                switch (panel.__typename) {
                                case "Card":
                                    return getCard(panel)
                                case "Product":
                                    return (
                                        <ProductCarouselCard
                                            data={panel}
                                        />
                                    )
                                case "Campaign":
                                    return (
                                        <AthleteCard
                                            data={panel}
                                            classname={carousel.styles}
                                            quotesRequired={
                                                carousel.quotesRequired
                                            }
                                        />
                                    )
                                case "ContentTypeRichText":
                                    return getRichText(panel)
                                }
                            }
                        )}
                </Flickity>
                {carousel.background &&
                carousel.background.__typename == "Image" ? (
                        <img
                            src={getImageUrl(carousel.background.image.url)}
                            alt={carousel.background.altText}
                            title={carousel.background.tooltip}
                        />
                    ) : (
                        carousel.background && (
                            <picture>
                                <source
                                    src={getImageUrl(
                                        carousel.background.desktopImage.url
                                    )}
                                    srcSet={getSrcSet(
                                        carousel.background.desktopImage.url,
                                        768
                                    )}
                                    media='(min-width: 768px)'
                                />
                                <img
                                    src={getImageUrl(
                                        carousel.background.smartphoneImage.url
                                    )}
                                    alt={carousel.background.altText}
                                    title={carousel.background.tooltip}
                                />
                            </picture>
                        )
                    )}
            </div>
        </Fragment>
    )
}

}
Carousel.propTypes = {
carousel: PropTypes.oneOfType([PropTypes.object]).isRequired
}

export default Carousel

Hi,

from what I see you're packaging whole Flickity with the wrapper and according to their license this falls under Commercial OEM License. You should probably define Flickity as a peer dependency and require users to attach it to the window object until Flickity team fixes the issue with requiring the library.

Changing Flickity's options during runtime doesn't seem to trigger a rerender. The options are controlled by variables from state, yet updating them doesn't seem to have an effect. Updating props connected to this.state doesn't work. This.forceUpdate() doesn't work either. What worked, though, is making the component appear or disappear by toggling a boolean variable. Is there a better approach that I missed?

https://codesandbox.io/s/j74ry6w38v

Hey, appreciate this! Makes it very simple to pull in Flickity.

Are you able to add a type definition to this? Flickity does have one already - not sure if that makes it any easier.

We're consistently getting this error in our isomorphic app. Not sure if this is something you've seen but flagging anyways for future weary Googlers. Will update if I find a solution.

First and foremost, thanks for your work on this, very much appreciated!

I'm pretty new to react, have used flickity a bunch before, but with this react component I'm not getting proper height on my carousel. If I resize it will recalculate and apply correct height. Not sure if I've configured it wrongly or if it's an issue with the component. Any ideas?

import React from 'react';
import Flickity from 'react-flickity-component';


export default class fullScreenCarousel extends React.Component {

  render() {

    const flickityOptions = {
      imagesLoaded: true,
      wrapAround: true,
      fullscreen: true,
      pageDots: false,
      prevNextButtons: false,
    }

    return (
      <Flickity
        className={'carousel'} // default ''
        elementType={'div'} // default 'div'
        options={flickityOptions} // takes flickity options {}
        disableImagesLoaded={false} // default false
      >
      {this.props.images.map(({ path }, index) => (
        <div key={index} className="carousel-cell">
          <img className="carousel-image" src={path} />
        </div>
      ))}
      </Flickity>
    )
  }
}

The usual

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Strack trace

warningWithoutStack	@	react-dom.development.js:506
warnAboutUpdateOnUnmounted	@	react-dom.development.js:18271
scheduleWork	@	react-dom.development.js:19681
enqueueSetState	@	react-dom.development.js:11141
Component.setState	@	react.development.js:335
setFlickityToReady	@	index.js:95
proto.emitEvent	@	ev-emitter.js:99
ImagesLoaded.complete	@	imagesloaded.js:249
ImagesLoaded.check	@	imagesloaded.js:210
setTimeout (async)		
ImagesLoaded	@	imagesloaded.js:117
ImagesLoaded	@	imagesloaded.js:83
componentDidMount	@	index.js:100
commitLifeCycles	@	react-dom.development.js:17130
commitAllLifeCycles	@	react-dom.development.js:18532
callCallback	@	react-dom.development.js:149
invokeGuardedCallbackDev	@	react-dom.development.js:199
invokeGuardedCallback	@	react-dom.development.js:256
commitRoot	@	react-dom.development.js:18744

setFlickityToReady needs to make sure component is still mounted

When invoking 'yarn run build' this error occurs

"Failed to minify the code from this file:

    ./node_modules/react-flickity-component/src/index.js:8

"

Below an example of the bug. Toggle the appearance of Flickity using the button. You should see an error in the sandbox browser window and console.

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

https://codesandbox.io/s/react-flickity-4zu6l

Dependencies:

"flickity": "2.2.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-flickity-component": "3.5.0",
"react-scripts": "3.4.1"

I believe the issue is the following:

With the cellSelector option, Flickity changes the DOM outside React. It moves all the non-cell nodes outside of the carousel.

This DOM mutation breaks the reconciliation of React when it tries to unmount a subtree with Flickity in it.

It does not break if the Flickity component has no children or if all of its children match the specified cellSelector. In these cases the above mentioned DOM mutation does not happen.

Suggestions:

• document this issue in the readme
• do not pass the cellSelector option to Flickity, effectively disabling this option
• TypeScript: remove the option entirely or add a warning to the type description

It all works fine in developer mode. But as soon as we build the project, flickity starts to misbehave. See the capture:

So, images overlaps. Sometimes there are blank spaces. In resume, the items fixed width is not being respected.

Any clue about why?

We are using nextJs, btw.