Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] HeroUI doesn't work on contentscript #1180

Open
2 of 3 tasks
RobertChaw opened this issue Feb 10, 2025 · 5 comments
Open
2 of 3 tasks

[BUG] HeroUI doesn't work on contentscript #1180

RobertChaw opened this issue Feb 10, 2025 · 5 comments
Labels
bug Something isn't working

Comments

@RobertChaw
Copy link

RobertChaw commented Feb 10, 2025

What happened?

The Modal component from heroui does not open on content script. This may be due to incorrect handling of dynamic imports.

Reproduction Playground
https://github.com/RobertChaw/heroui-not-work-on-contentscript

Image

Image

Image

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught (in promise) Error: Cannot find module '23bSo'
    at newRequire (contents.85aba5ab.js:62:19)
    at Function.newRequire (contents.85aba5ab.js:46:18)
    at contents.85aba5ab.js:49263:27

(OPTIONAL) Contribution

  • I would like to fix this BUG via a PR

Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I checked the current issues for duplicate problems.
@RobertChaw RobertChaw added the bug Something isn't working label Feb 10, 2025
@lazyanubis
Copy link

Image
I have the same problem

@Guibod
Copy link

Guibod commented Mar 5, 2025

I can confirm that I have the same issue on a tab page, right now.

To my understanding the packaging of Plasmo is unable to resolve a dynamic import.

@Guibod
Copy link

Guibod commented Mar 5, 2025

For both issues you can:

1- Disable animation in the HerouiProvider @RobertChaw

<HeroUIProvider disableAnimation={true}>

2- Disable animation in the ToastProvider @lazyanubis

<ToastProvider disableAnimation={true}/>

@RobertChaw
Copy link
Author

RobertChaw commented Mar 5, 2025

I found a better temporary solution for this issue. @Guibod @lazyanubis

Just manually import "@heroui/dom-animation" in contentscript.

//contents/contentscript.js
import { Button, HeroUIProvider, useDisclosure } from "@heroui/react";
import "@heroui/dom-animation"; // manual import
...

@lazyanubis
Copy link

It looks like what I need to dynamically import is domMax.

import "@heroui/dom-animation";

@RobertChaw It didn't work for me. 😂


<ToastProvider disableAnimation={true}/>

@Guibod It works but it looks not good. Thanks for the tip all the same. 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants