search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.45k stars 116 forks source link

ModalBackdrop is not working #2175

Closed macrozone closed 2 months ago

macrozone commented 4 months ago

Description

ModalBackdrop throws an error when rendered

CodeSandbox/Snack link

not yet

Steps to reproduce

Rendering the ModalBackdrop yields

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ForwardRef`.

the stacktrace reveals:

The above error occurred in the <NotFoundErrorBoundary> component:

    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-style/animation-resolver/lib/module/index.js:233:25)
    at StyledComponent (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-style/react/lib/module/styled.js:683:26)
    at PresenceChild (webpack-internal:///(app-pages-browser)/../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:18:23)
    at AnimatePresence (webpack-internal:///(app-pages-browser)/../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs:75:23)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-style/animation-resolver/lib/module/AnimatedComponents/index.js:55:18)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-ui/modal/lib/module/OverlayAnimatePresence.js:20:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-ui/modal/lib/module/ModalBackdrop.js:25:15)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/react-native-web/dist/exports/View/index.js:66:27)
    at StyledComponent (webpack-internal:///(app-pages-browser)/../../node_modules/@gluestack-style/react/lib/module/styled.js:683:26)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/react-native-web/dist/exports/View/index.js:66:27)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/react-native-web/dist/exports/View/index.js:66:27)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/react-native-web/dist/exports/Modal/Moda

gluestack-ui Version

"@gluestack-ui/modal": "^0.1.32",   "@gluestack-ui/themed": "^1.1.26",

Platform

Other Platform

No response

Additional Information

No response

rajat693 commented 4 months ago

Hi @macrozone,

I tried running the modal component example, and it works fine for us. Please share a minimal example that demonstrates your issue.

Thank you.

rajat693 commented 2 months ago

Since we haven’t received further responses, I’ll be closing this issue for now. If you need more assistance or if the problem persists, please feel free to reopen it. Thank you!