Sheet not opening in StrictMode

[Chrishuwei]

I am trying this module in my page. However, I cannot see the sheet in view because we set transform value is css. Also, we do not have this behavior in the release environment (I deployed my website through GCP).

One more interesting thing is if I zoom in and out by cmd +/-, then I can see the sheet rendering in view when I am in development mode.

Is this a known issue of this module? Or is there any workaround to prevent this issue? Thank you.

CODE:
'use client';
import { Sheet } from 'react-modal-sheet';
import { useState } from 'react';

export default function Container() {

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

return (
    <div>
        <div>this is container</div>
        <button onClick={() => setOpen(true)}>Open sheet</button>

        <Sheet
            isOpen={isOpen}
            onClose={() => setOpen(false)}
            snapPoints={[-50, 0.5, 200, 0]}
            initialSnap={1}
        >
            <Sheet.Container>
                <Sheet.Header />
                <Sheet.Content>
                    <div style={{ 'color': 'black' }}>We will have product content here</div>
                </Sheet.Content>
            </Sheet.Container>
            <Sheet.Backdrop />
        </Sheet>
    </div>
)

}

[Temzasse]

Hi @Chrishuwei 👋🏻

This sounds like it could be a React StrictMode related issue. For some reason the motion library that react-modal-sheet relies on struggles with StrictMode causing the opening animation of the sheet to not trigger correctly. The reason things work for you in production is because StrictMode is only enabled in development mode.

Unfortunately I haven't been able to figure out a workaround yet. Currently the easiest fix is to just turn off/remove React StrictMode.

[Temzasse]

I updated the title to reflect the real root cause of the problem.

I'll keep this issue open so that other devs that encounter the same issue can see it and maybe someone has an idea how to mitigate the problem. I currently don't have much time to investigate this problem.

[xsjcTony]

Are you using React 18 or 19?
I don't have any issue with StrictMode enabled in React 18

[Temzasse]

I'm using React 19. As part of the v4 refactoring of react-modal-sheet I also updated the example app that I use for local development to use v19 and this issue happens there if I enable StrictMode.