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

Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules #362

Open
eyunhua opened this issue Jan 13, 2023 · 6 comments
Labels

Comments

@eyunhua
Copy link

eyunhua commented Jan 13, 2023

Expected Behavior

Html-to-image as part of these functions, they are packaged into sdk. When other projects call sdk, an error is reported as follows:
image

Current Behavior

Console report an error

Steps To Reproduce

  1. introduce html-to-image into the project
  2. packed as sdk output
  3. other projects introduce sdk
  4. click the button to call html-to-image in other projects

Your Environment

  • html-to-image: 1.11.4
  • OS: macOS Catalina 10.15.7
  • Browser: chrome 108.0.5359.124
@eyunhua eyunhua added the bug label Jan 13, 2023
@vivcat
Copy link
Contributor

vivcat bot commented Jan 13, 2023

👋 @eyunhua

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

@AndrewN93
Copy link
Contributor

This worked in my case - #49 (comment)

@lalit7788
Copy link

Any update on this problem?

Even with the crossorigin="anonymous" I am getting these errors:

Error inlining remote css file DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Access to fetch at 'https://use.fontawesome.com/releases/v5.0.7/css/all.css' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error loading remote stylesheet TypeError: Failed to fetch

@lalit7788
Copy link

Update: setting skipFonts to true removed all of the error messages and the resulting image still looks the same.

@petrgazarov
Copy link

Also getting this error. Seems like skipFonts: true just hides the problem. The fonts in the screenshot are inaccurate.

Original:
Conduit
Screenshot:
about_blank

@DivyaShikha-Singh
Copy link

    skipFonts: true,
    preferredFontFormat: 'woff2',
    backgroundColor: 'white'

This helped me to get rid of all the console errors related to css and scripts from the library

caendesilva added a commit to caendesilva/Windowlight that referenced this issue Apr 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants