React: Cannot assign to read only property '_status' of object '#<Object>'

Question

I've been struggling over this error for a while now. It happens when I try to open react-bootstrap Modal with dynamically passed lazy component referrence and props to render it inside. It worked with classic import.

First row points to some react's internal lazy handler:

This is how modals are handled inside my ModalProvider:

const ModalList = React.memo(({ modalList, closeModalByIndex, confirmModalExitByIndex }) =>
    modalList.map((modalDef, index) => {
        const closeModal = () => closeModalByIndex(index);
        const onConfirmExitChange = (confirmExit) => confirmModalExitByIndex(index, confirmExit);
        const props = { ...modalDef, key: index, closeModal, onConfirmExitChange };
        switch (modalDef.type) {
            case TYPE_LIST:
                return (
                    <React.Suspense fallback={fallback}>
                        <ListModal {...props} />
                    </React.Suspense>
                );
            case TYPE_FORM:
                return (
                    <React.Suspense fallback={fallback}>
                        <FormModal {...props} />
                    </React.Suspense>
                );
            case TYPE_LIST_MULTI:
                return (
                    <React.Suspense fallback={fallback}>
                        <ListMultiModal {...props} />
                    </React.Suspense>
                );
            default:
                return null;
        }
    })
);

And this is how it is passed:

const openListModal = (Component, componentProps) => openModal(Component, componentProps, TYPE_LIST);

Anyone with deeper understanding what could possibly cause this?

bigless · Accepted Answer · 2022-10-25 22:06:34Z

5

Found out by trial by error. It was caused by immer's produce function which builds read-only deep copy of object.

    setModalList(
        produce(modalList, (modalList) => {
            modalList.push({ Component, componentProps, type, show: true });
        })
    );

edited Oct 25, 2022 at 22:06

answered Oct 25, 2022 at 21:52

bigless

3,14124 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Cannot assign to read only property '_status' of object '#<Object>'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related