html-to-image icon indicating copy to clipboard operation
html-to-image copied to clipboard

Published 20 hours ago • verified publisher icon bubkoo

Firefox: TypeError: can't access property "trim", t is undefined

Open Mapaler opened this issue 6 months ago • 1 comments

Not work in Firefox.

oops, something went wrong! TypeError: can't access property "trim", t is undefined debugger eval code:20:12

Expected Behavior

Generate pictures like Chrome

Current Behavior

Stopped because of an error

Possible Solution

There's nothing I can do

Steps To Reproduce

Sample URL I use html2canvas for the screenshot button, please use the code to test html-to-image.

(()=>{
const script = document.createElement('script');
script.src = "https://unpkg.com/html-to-image";
document.head.appendChild(script);
const node = document.body.querySelector(".formation-box");

script.onload = () => {
	htmlToImage
		.toPng(node)
		.then((dataUrl) => {
			const img = new Image();
			img.src = dataUrl;
			document.body.appendChild(img);
			const downLink = document.body.querySelector(".down-capture");
			downLink.href = dataUrl;
			downLink.download = `screenshot.png`;
			downLink.click();
		})
		.catch((err) => {
			console.error('oops, something went wrong!', err);
		});
}


})();
Error Message & Stack Trace in Firefox Developer 139.0b10

<!-- Provide a log message if relevant -->
oops, something went wrong! TypeError: can't access property "trim", t is undefined
    K https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    onload debugger eval code:9
    EventHandlerNonNull* debugger eval code:7
    <anonymous> debugger eval code:25
debugger eval code:20:12
    onload debugger eval code:20
    (异步：promise callback)
    onload debugger eval code:19
    (异步：EventHandlerNonNull)
    <anonymous> debugger eval code:7
    <anonymous> debugger eval code:25
Error Message & Stack Trace in Firefox ESR 128.10.1esr

<!-- Provide a log message if relevant -->
Error inlining remote css file DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
    J https://unpkg.com/html-to-image:1
    J https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    J https://unpkg.com/html-to-image:1
    X https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    X https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    onload debugger eval code:9
    EventHandlerNonNull* debugger eval code:7
    <anonymous> debugger eval code:25
html-to-image:1:16038

Error while reading CSS rules from null DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
    J https://unpkg.com/html-to-image:1
    J https://unpkg.com/html-to-image:1
    promise callback*J/</< https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    J https://unpkg.com/html-to-image:1
    X https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    X https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    onload debugger eval code:9
    EventHandlerNonNull* debugger eval code:7
    <anonymous> debugger eval code:25
html-to-image:1:16240

oops, something went wrong! TypeError: t is undefined
    K https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Y https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    Z https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    u https://unpkg.com/html-to-image:1
    promise callback*a https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    tt https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    et https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    c https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    e https://unpkg.com/html-to-image:1
    toPng https://unpkg.com/html-to-image:1
    onload debugger eval code:9
    EventHandlerNonNull* debugger eval code:7
    <anonymous> debugger eval code:25
debugger eval code:20:12

Additional Context

Your Environment

  • html-to-image: [e.g. 1.11.13]
  • OS: [e.g. Windows 10.0.19045.5912]
  • Browser: [e.g. Firefox Developer 139.0b10], [e.g. Firefox ESR 128.10.1esr]

Mapaler avatar May 18 '25 21:05 Mapaler

👋 @Mapaler

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.

biiibooo[bot] avatar May 18 '25 21:05 biiibooo[bot]

I ran in to this as well, it has to do with fontFamily being endefined:

Image

however:

Image

so... 🤷 idk

NullVoxPopuli avatar Jun 29 '25 12:06 NullVoxPopuli

We ran into this as well, reverting to 1.11.11 fixed the issue (not sure if the bug is introduced in 1.11.12 or 1.11.13).

francescorivola avatar Jul 02 '25 11:07 francescorivola

Using rule.style.getPropertyValue('fontFamily') to get the fontFamily fixes the issue on my side.

See https://github.com/bubkoo/html-to-image/pull/547

jpinsonneau avatar Jul 16 '25 08:07 jpinsonneau