I am now getting this error after upgrading to React 18. Prior to doing the upgrade, I did not see this error: React-Modal: Cannot register modal instance that's already open. Does anybody have any idea of what might have changed?

I was having this error (react-modal@3.15.1, React@18.2.0), and after a lot of frustration found out that my problem was caused by using React.StrictMode in my root element, which apparently double-invokes some lifecycle methods in development mode (not production, though). As of now, this behavior is documented in the StrictMode docs – search for “double-invoking the following functions”.

I found this solution by accident, because I was investigating an effect being called twice and found this answer, which also referenced this answer which has more info about the double rendering of StrictMode.

It seems like this is harmless in my case because the only visible issue is the warning in console (modals are still displaying fine), but if anyone has a suggestion for suppressing the warning, I’d appreciate it! Removing the StrictMode tag stops this issue from happening, but I want to keep the benefits of using strict mode.

I don’t

I’m flagging this as hardcore. I did a little investigation, don’t have time to fully jump into this, and, this is super annoying.

It’s all about the new react version and this component src/components/Modal.js, specially when the component is unmounted.

If you want to be at the 1% top react dev, this is a great challenge.

You need to:

• Check the places where we (de)register the modal (mount and unmount)
• Make sure react calls unmount when it is supposed to (this is actually a problem since react 16.3+)

This is enough information to start digging in.

If anyone wants to fight with this, let me know. For any other questions, I’ll be here to help.

I don’t want to be a top react dev, just fix the issue please.

Why don’t you fix it, @mleister97?

Hmmmm…It’s recommended to not use modal with conditional rendering. There is a problem with createPortal when using this way (need to check if it still happening. It starts happening on version +16.3 of react). Are you all using conditional rendering?

Please read this to help debugging this issue

It’s recommended to not use modal with conditional rendering. There is a problem with createPortal when using this way (need to check if it still happening. It starts happening on version +16.3 of react). Are you all using conditional rendering?

A suggestion is: don’t use conditional rendering with modals…there is no need to. There is no performance cost, there is no problem to maintain (it’s only one state).

Sorry for this guys… 😂 But please let me know if you have a different case where this happens other than with conditional rendering.

This solved the issue for me.

I was conditionally rendering in my component, rather than letting the isOpen prop handle the rendering.

Please read this to help debugging this issue

It’s recommended to not use modal with conditional rendering. There is a problem with createPortal when using this way (need to check if it still happening. It starts happening on version +16.3 of react). Are you all using conditional rendering?

A suggestion is: don’t use conditional rendering with modals…there is no need to. There is no performance cost, there is no problem to maintain (it’s only one state).

Sorry for this guys… 😂 But please let me know if you have a different case where this happens other than with conditional rendering.

Hmmm…this is interesting…could you please help creating a reproducible example?

here: https://stackblitz.com/edit/nextjs-aznh2l?file=pages%2Findex.js

without modalIsOpen && error doesn’t occur

Version 3.15.1 was released. Is this happening on this version?

Yes, but I think it occurs only in development mode with react 18 and enabled StrictMode https://github.com/reactwg/react-18/discussions/19

Hey @diasbruno, want me to take this one? Feel free to assign it to me if so. 🙇

Issue is here: https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js#L136

When strict mode unmounts isOpen is not yet initialized so it’s not de-registering the modal correctly so it leaks instances and focus handlers.

This “works”

  if (this.state.isOpen || (typeof this.state.isOpen === 'undefined' && this.props.isOpen)) {
    this.afterClose();
  }

But honestly whole thing should be rewritten.

We Can’t use: {modalIsOpen && (......) The best way to use that is creating a component where we have all the code that we need, a componet seems something like this:

<Modal isOpen={modal} style={customStyles} > <ModalProducto /> </Modal> and ModalProducto.jsx is something like this: export default function ModalProducto() { return ( <div>ModalProducto</div> ) }

That way works for me

No podemos usar: {modalIsOpen && (......) Lo que se debe hacer es crear un componente con toda la lógica que necesitamos, algo parecido a lo siguiente: <Modal isOpen={modal} style={customStyles} > <ModalProducto /> </Modal>

y ModalProducto.jsx es algo como lo siguiente: export default function ModalProducto() { return ( <div>ModalProducto</div> ) } Esa es la solución.

I have the same issue.

no conditional rendering, no strict mode.

react-modal 3.16.1, react 18.2.0

@rodriguezmarting Awesome. This is weird… Can you make a step to reproduce so we can see how are you triggering this behavior?

The bug also happens when the Modal lives next to a component that conditionally renders. Plus it only happens when using base | afterOpen | beforeClose classNames.

Something like this won’t work:

export const MainHeader2 = () => {
  const { isMobile } = useContext(ViewportContext);

  const [isOpen, setIsOpen] = useState(false);

  const toggleConfirmModalOrDrawer = () => {
    setIsOpen((prevState) => !prevState);
  };

  const doSomething = () => someAction();

  return (
    <header>
      <Logo handleClick={toggleConfirmModalOrDrawer} />
      <Modal
        className={{
          base: styles.modalContent,
          afterOpen: styles.modalContentAfterOpen,
          beforeClose: styles.modalContentBeforeClose,
        }}
        overlayClassName={styles.modalOverlay}
        isOpen={!isMobile && isOpen}
        onRequestClose={toggleConfirmModalOrDrawer}
      >
        <ConfirmLeaveModalContent
          onConfirm={doSomething}
          onDismiss={toggleConfirmModalOrDrawer}
        />
      </Modal>
      {isMobile && (
        <ConfirmLeaveDrawer
          onConfirm={doSomething}
          onDismiss={toggleConfirmModalOrDrawer}
        />
      )}
    </header>
  );
};

Facing the same issue for one of my modals after upgrading to React 18. Any fixes to this? Funnily enough, the modal starts working “after a while” (I think when I leave the app and come back). Super strange