FlipMove not working in production environment

[Bryan1337]

While running tests locally with FlipMove everything seems to work perfectly. Though when deploying to a production environment, Flipmove seems to break the container it's supposed to render. The error I'm getting is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 't'

't' appears to be the parent where the child containing the FlipMove tags gets rendered in. I've identified this as a FlipMove issue since commenting out the tags works perfectly fine, just without animations.

The list is rendered in a parent component as:

<ListContainer messages={this.state.messages} />

ListContainer:

import FlipMove from 'react-flip-move';
import SingleMessage from './SingleMessage';`

class ListContainer extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <FlipMove duration={250} easing="ease-out">
                {this.props.messages.map(message => (
                    <SingleMessage
                        key={message.id}
                        message={message}
                    />
                ))}
            </FlipMove> 
        )      
    }
}
export default ListContainer;

React version: ^15.4.2 Flipmove ^3.0.1

An answer or some clarification on this topic would be greatly appreciated. I've been searching for alternatives or a way to make this work in production for quite a while now but I just can't wrap my head around what's going wrong here. 😅

[tobilen]

Hey @Bryan1337,

looks like a flip-move issue indeed. Can you provide an enviroment in which to reproduce this issue? https://codesandbox.io/, github repo etc.?

[rhys-vdw]

I can confirm that we also have this issue in prod right now, except I'm getting the error message in development too. Strangely the animation works in dev. I was considering opening an issue for this too. I'll take a look on Monday and report back with any findings.

[Bryan1337]

Hey guys, thanks for the answers.

Unfortunately I'm not able to reproduce this issue in a sandbox environment. It only seems to persist after deploying FlipMove to production (After minifying). As @rhys-vdw stated, the animations do seem to work in a dev environment for some reason.

[wa0x6e]

Not sure if related, but I am encountering an issue on production too, but not on development.

In my case, there are no error messages, everything work perfectly when adding elements to the list. But when removing element, the list does not update.

Same bug when I tried downgrading to v2

[joshwcomeau]

Well, this is confusing!

Will try and find some time to dig into this, but my schedule is pretty packed over the next couple weeks.

[rhys-vdw]

I fixed the occurrence of this by using stateful components.

[joshwcomeau]

Ohh, yeah. React Flip Move doesn't support functional stateless components.

Weird that it only seems to happen in production :/ maybe we should add a development warning to catch it sooner.