search

GSTJ / react-native-magic-modal

🦄 A modal library that can be called imperatively from anywhere!
https://github.com/GSTJ/react-native-magic-modal
MIT License
181 stars 8 forks source link

Importing not working on expo web #91

Open RodSarhan opened 1 month ago

RodSarhan commented 1 month ago

Describe the bug

import {MagicModalPortal} from 'react-native-magic-modal'

Causes the web app to throw this error

SyntaxError: Cannot use 'import.meta' outside a module

To Reproduce import MagicModalPortal and run the app on web (expo)

Versions

Additional context expo app.config.ts

        web: {
            bundler: 'metro',
            output: 'single',
        }
GSTJ commented 1 month ago

I just merged a PR improving the kitchen-sink example to be web-compatible. It's working great. Can you give it a try?

https://github.com/user-attachments/assets/184dc047-f343-46f4-b76e-5dfe1b034f17

GSTJ commented 1 month ago

I'll close for now. Let me know if it still happens with a repro, and we can reopen. Thanks.

RodSarhan commented 1 month ago

I found a hack that made it work for web, but not sure what the permanent solution would look like,

Here's what i did: I went to node_modules/react-native-magic-modal/dist/index.js and removed the faulty line const require = __node_cjsModule.createRequire(import.meta.url);

ran the app again and it worked as expected on web

Edit: I don't think i have any special build configs, so not sure where this is originating from

GSTJ commented 1 month ago

Damn! It seems like it's due to bunchee. Need to investigate a way to deal with shims.

GSTJ commented 1 month ago

https://github.com/huozhi/bunchee/pull/289/files#diff-572c3f072a63223aec0adfa33c4358dd00610b7f7aa57bb141b12fa000c7e35c

If you find a good solution or bunchee alternative, let me know and feel free to open a PR. I will likely only be able to dive into this next week+