HMR does not work in modal

[telcy]

What version of Remix are you using?

1.19.3

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. clone https://github.com/telcy/remix-hmr-modal-issue
2. install dependencies
3. click "simple dialog" button
4. change modal text to trigger hmr

Expected Behavior

Modal should stay open and text should get replaced.

Actual Behavior

Modal closes

[brophdawg11]

I'm not familiar with mui-modal-provider but I'm not sure if this is a problem with Remix or not. Looking at it briefly, useModal is destroying the modal in an effect:

  useEffect(
    () => () => {
      if (!disableAutoDestroy) {
        destroy(id.current);
      }
    },
    [disableAutoDestroy, destroy]
  );

destroy there comes from their own internal useContext(ModalContext), so it seems as if it's identity is not stable.

I tested the useModal({ disableAutoDestroy: true }) option and that keeps the modal open during HMR - but I'm unsure of the impacts of keeping that option enabled in production use-cases.

@pcattori unless you have any specific ideas for where Remix HMR might be causing this I'm thinking this may need to be investigated on the MUI side?

[telcy]

I thought I might add that Vite and Next do not have this issue with the exact same modal setup. Unsure if it is a bug or just the nature how Remix's HMR works.

Edit:
https://github.com/telcy/next-simple-dialog
https://github.com/telcy/vite-simple-dialog

[dantxal]

I have a similar problem with modals, where HMR simply doesn't work (it refreshes the page).

Just by having an OverlayProvider component from 'react-aria' as a parent component for the Outlet in root.tsx, is enough to stop HMR from working. Even if there is no modal using that provider.

I will take a look at the implementation of the OverlayProvider myself, since I am still unsure whether that is a problem with that library or remix.

EDIT: Here is the repro: https://github.com/dantxal/repro-issue-7248-remix
Simply clone the repo and follow the instructions on Readme file to reproduce.

[dmarkow]

Same thing happens for me -- it's most obvious in modals (which are always triggered by a setState call), but really all state gets blown away on any HMR update in my app. For me it was DndProvider from react-dnd, which wraps my whole app. At a glance it seems to be a basic wrapper around a react context, but something about it doesn't like HMR. Sounds like a similar problem with these other providers.

[telcy]

@dantxal @dmarkow
As you said, it's losing all state on HMR updates. Have you found a solution for this issue?

[pcattori]

I wrote up some limitations of React Fast Refresh in the docs. Could be that things like DndProvider are class components? 🤷

But for issues that aren't reproducible in Vite nor Next, then the issue is most likely Remix-related, not a React Fast Refresh limitation.

[dmarkow]

@pcattori I know at least for react-dnd, it doesn't use classes. I remember seeing something similar in vite, where contexts were breaking HMR. They did something to the react-refresh code to deal with this.

[telcy]

I took a look into mui-modal-provider and it does not use classes either.

[brophdawg11]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!