Html2canvas: IE 11 issue, Error: Uncaught (in promise): Error: Member not found.

I added a link to the following promise library and it seemed to fix IE 11 for us.
https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js

Without code to reproduce the error I can't really help.

Hi @niklasvh ,

This is demo sample i have hosted on GitHub you can see - GitHub Html2Canvas Demo

Full code is also uploaded on github, if you want to see: Code package

How to run project:
1) Unzip package
2) Run command: "npm install" from directory to install dependency
3) To run project command: "npm start"

Hi @jelkins8,

I have tried this solution but its not working for me.
This is demo sample i have hosted on GitHub you can see - GitHub Html2Canvas Demo

Thanks

Hi @niklasvh ,
I too have tried with es6-promise and bluebird without success in IE11, can confirm that GitHub Html2Canvas Demo also fails in IE for me.
I receive html2canvas: Error: Member not found. followed by Possible Unhandled Promise Rejection: Error: Member not found.
thanks!

updated, after using the bluebird polyfill my stack trace is:

Error: Member not found.
at Anonymous function (eval code:213:21)
   at createElementClone (eval code:212:17)
at cloneNode (eval code:225:13)
at cloneNode (eval code:248:25)
at cloneNode (eval code:248:25)
 at DocumentCloner (eval code:53:9)
at cloneWindow (eval code:505:5)
at Anonymous function (eval code:53:9)
at r (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js:31:6804)
at r.prototype._settlePromiseFromHandler (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js:30:12222)

I am facing the same issue for html2canvas: member not found for IE.
For chrome it is working perfectly fine.
Please update if any solution. Thanks

I've reproduced the issue and located the cause, it happens in the createElementClone function when it attempts to access the cssText property, for some reason when using font-awesome, an element with fa-spin throws this error in IE when accessing the property.

As follows works:

if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
              var style = node.cloneNode(false);
                  var css = [].slice.call(node.sheet.cssRules, 0).reduce(function (css, rule) {
                    try {
                      if (rule && rule.cssText) {
                        return css + rule.cssText;
                      }
                      return css;
                    } catch (err) {
                      _this3.logger.log('Unable to access cssText property', rule.name);
                    }
                  }, '');
                  style.textContent = css;

                return style;
            }

Note the try...catch.

I'll raise a PR.

Appears to cause a regression in Firefox 58.0.0 (Linux 0.0.0) /tests/reftests/background/radial-gradient2.html Should render untainted canvas FAILED @niklasvh any chance you could take a look?

thanks

Hi @niklasvh,
Have you got any solution for this, is any one looking on this issue ?

Thanks

Hi @Prabhat2404, the fix I've proposed in https://github.com/niklasvh/html2canvas/pull/1415 works great for me, however it does fail one of the radial gradient tests, which I've asked @niklasvh to have a look at. The issue occurs for me when using font-awesome icons, in particular fa-spin.

same problem here

The issue is still exists for IE in case we try to print html code.
Is there any workaround to not modify library source code and solve the issue?

+1

+1

+1

It helps for me!

@evgenyjam That solution still has a bug, you need to add an empty string as the initial value for reduce.

I mentioned that on the PR, but the author hasn't updated it yet. But with that change it works for me.

@cyouden this way?
.reduce(("", css, rule) => {

@BrunoMarc No, it's the last argument for reduce, so:
.reduce((css, rule) => { /* code */ }, "")

(E.g. see the code the change is proposed to replace in that diff, it correctly uses the initial value for reduce.)

@cyouden Thanks for the response! I have inserted this code in html2canvas.js but the Member not found still persist, any ideas?
if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
const css = [].slice
.call(node.sheet.cssRules, 0)
.reduce((css, rule) => {
try {
if (rule && rule.cssText) {
return css + rule.cssText;
}
return css;
} catch (err) {
this.logger.log('Unable to access cssText property', rule.name);
return css;
}
}, '');
const style = node.cloneNode(false);
style.textContent = css;
return style;
}

@BrunoMarc No idea, that change was enough to get it working for me.

Hey - sorry to be late to the party, I've just committed a change with the default empty string for the reduce, as suggested, hope that helps!
cheers

@niklasvh @BrunoMarc @cyouden good news the build is passing for the PR
Sorry I didn't update earlier, I'd actually moved on from moving the library, I'd come across the bug while using it in a spike. Hope it helps!

@simonpinn I am trying to use html2canvas-1.0.0-alpha.10 version for my angular 4 code. I am getting following error in all browsers. And only part of html is getting printed.

34487ms html2canvas: html2canvas $npm_package_version
core.js:1427 ERROR Error: Uncaught (in promise): undefined
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4747)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1540)
defaultErrorLogger @ core.js:1427
ErrorHandler.handleError @ core.js:1488
Logger.js:36 83270ms html2canvas: Finished parsing node tree
Invalid value given for Length: "auto"

@simonpinn I am using the way as follows. Is there any issue with latest version 1.0.0-alpha.10 in tyscript (angular 4) code? Can you please help me with solution. I am very much in need.

@bandacs this issue is for solving an IE 11 error for uncaught promises, please raise an issue against the alpha.10 build, if you are having a problem.

thanks

@simonpinn @cyouden
Following up the above defect. I found the other library (dom-to-image) for Chrome and and Firefox browsers. But the issue still continues in IE. When I go through the above conversation, I got to know that empty string workaround fixes the defect. Is that work around working? Also may I know when that change will be included in library?

Fix merged in v1.0.0-alpha.11

I have reactjs project and i did npm install for html2canvas updates. but in IE 11 browser its still showing me Member not found error. Please help. I checked on Windows 8 system

I am using the v1.0.0-alpha.11 and it works great in Chrome but getting an error on IE 11 on the same lines
html2canvas(panel).then(canvas => {
var img = canvas.toDataURL("image/png");
});

Hello. Same error for me. Our customer uses IE11 as default ...

Fixed it!!
Open node_modules/html2canvas/dist/html2canvas.js
Search for if (rule && rule.cssText)
and Change it to if (rule && typeof rule.cssText === 'string')
This fixed the problem for me in IE11 :)

fixed with https://github.com/niklasvh/html2canvas/commit/bc270bb2116480a8ae08d3d9601f2b6118b44da3

Hi All,
I am also having the below issue which fixed:
Open node_modules/html2canvas/dist/html2canvas.js
Search for if (rule && rule.cssText)
and Change it to if (rule && typeof rule.cssText === 'string')
This fixed the problem for me in IE11 :)

How can i get a new published version of it to use in my project? currently i tested by editing in node-modules in my local environment. to push it production need a new published version of 'html2canvas' version? can you please help me to get it?

Currently i am using the "html2canvas": "^1.0.0-rc.1", which doesn't have the fix.

Hi @niklasvh, can you tell me when new version will be release with the fix for issue #1374 . Eagerly waiting to see fix in the version.