setState provokes Minified React error #130 only on production build

Question

Every time I interact with the drop-down button on the front page of my application, the error https://reactjs.org/docs/error-decoder.html/?invariant=130&args is logged in the console. This is only when I push it to my production server, it works fine in the developer environment.

I have debugged every piece of the stack trace, and have tracked it down to the setState method from the collapse function in the Quicklinks class. This is called in the QLButton class, which is a child of Quicklinks.

export default class Quicklinks
    extends React.Component<Props> {
    props: Props;
    state: State;
    constructor(props: Props) {
        super(props);
        this.props = props;
        this.collapse = this.collapse.bind(this);

        this.state = {
            collapsed: true
        }
    }

    // Collapse function intended to be called in a child
    // Invoking this crashes the page
    collapse = () => this.setState({ collapsed: !this.state.collapsed });
    


    private QuickLinkExpanded = () =>
        <>
            <ul className="ql-expanded-container ql-links ql-tree-stem">
                <button className="ql-expanded-title clickable"
                    onClick={this.collapse}>{this.props.title}</button>
                {this.props.children}
            </ul>
        </>

    public static Item = (props: { link: string, name: string }) =>
        <>
            <li className="ql-item ql-tree-branch"><a href={props.link}>{props.name}</a></li>
        </>

    render = () =>
        <>
            <div className="ql-container">

                <When condition={this.state.collapsed}>
                    <QLButton title={this.props.title} action={this.collapse} />
                </When>

                <When condition={!this.state.collapsed}>
                    <this.QuickLinkExpanded />
                </When>

            </div>
        </>
}

export default class QLButton
    extends React.Component<Props> {

    state: State;
    animationRef: React.RefObject<HTMLElement>
    constructor(props: Props) {
        super(props);
        this.animationRef = React.createRef();
        this.state = {
            title: props.title,
            animating: false
        }
    }

    render(): React.ReactElement {
        return <>
            <button onClick={this.onClick} className="ql-btn clickable">

                <When condition={this.state.animating}>
                    <div className="ql-typing-text">
                        {"exec tree ./"}
                        <span className="ql-cursor" ref={this.animationRef} />
                    </div>
                </When>

                <div className="ql-title-text">
                    {this.state.title}
                </div>

                <When condition={!this.state.animating}>
                    <div className="ql-btn-icon">
                        <FontAwesomeIcon icon={faChevronDown} />
                    </div>
                </When>

            </button>
        </>
    }

    private onClick = (): void => {
        if (this.state.animating) return;
        this.setState({ animating: !this.state.animating }, this.openQuicklinks);
    }

    private openQuicklinks = (): void => {
        anime.timeline()
            .add({
                targets: this.animationRef.current,
                translateX: [...Array(9)].map((_, i) => ({
                    value: ((i + 1) * 0.57) + "em",
                    duration: 100,
                })),
                easing: "easeInOutBack",
            })
            .add({
                targets: this.animationRef.current,
                duration: 700,
                opacity: [
                    { value: [1, 1] },
                    { value: [0, 0] },
                    { value: [1, 1] },
                    { value: [0, 0] }
                ],
            }).finished.then(() => {
                this.props.action(); // This call goes to the Quicklinks parent
            })
    }
}

Reading related articles, I have tested for imports being done incorrectly (they all seem fine), I have removed the package_lock.json and refreshed it, and messed with the lines and surrounding code where the trace points too.

Answer 1

It was suggested to me to move QuicklinkExpanded and Item outside of the Quicklinks class. This actually fixed the crashing in production. I am not sure why, this is likely a bug with react and ts compiling to js.