TypeError: html2canvas.default is not a function

[crwgregory]

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

Simple Call:

html2canvas(document.getElementById('passport-questions-form')).then(canvas => {
    // code...
});

Is giving me:
ERROR TypeError: html2canvas_1.default is not a function

This happened after upgrading Angular cli@1.6.8 from 1.5.0. I assume it might be because there was a TypeScript Update?

• html2canvas version tested with: alpha.10
• Browser & version: chrome:64.0.3282.167
• Operating system: windows 10

[crwgregory]

Can confirm this is because the update to angular cli 1.6.8

Downgrading back to 1.5.0 seems to be a work around for this issue.

[CardzMania]

Happens for me too!

I am on angular/cli: 1.7.3

[1456118242]

Happens for me too!

I am on angular/cli: 1.7.2

[1456118242]

@crwgregory

[1456118242]

@niklasvh Help me Thank you very much

[seyidaniels]

So how do i go about this erro? I should downgrade my version of angular cli?

[dbonillao]

Make sure to import the script under the scripts list in angular-cli.json
"scripts": [
"../node_modules/html2canvas/dist/html2canvas.min.js"
]

And in the class as:

import * as html2canvas from "html2canvas"

[seyidaniels]

Thanks @dbonillao

[codeepic]

Thanks @dbonillao !

[rkinnovit]

Really awesome @dbonillao thank you so much.......

[wduvan]

for me works, in my file index.html import

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

[JEEVANJGA]

Facing this error for html2canvas version : 1.0.0-rc.3

using with react 15, typescript, along with SPFX framework.
#1440

@niklasvh , kindly please check why this is happening?

[ws-tumx]

how to fix it ?
angular6 html2canvas@1.0.0-rc.3
@niklasvh

[evilbdef]

how to fix it ?
using angular7 html2canvas@1.0.0-rc.3

[Pankaj-Sati]

Remove "default" word
Instead of html2canvas.default(div, options){...}
Use html2canvas(div, options){...}

[dharnen]

I was able to resolve the 'not a function' error that is throw when trying to call html2canvas(element, options). I have similar setup to @JEEVANJGA, using react 15, typescript, and SPFX. After downloading the @types for the module the index.d.ts file looks like this originally:

import { CloneOptions } from './dom/document-cloner';
import { ResourceOptions } from './core/cache-storage';
import { RenderOptions } from './render/canvas/canvas-renderer';
export declare type Options = CloneOptions & RenderOptions & ResourceOptions & {
backgroundColor: string;
foreignObjectRendering: boolean;
logging: boolean;
removeContainer?: boolean;
};
declare const html2canvas: (element: HTMLElement, options?: Partial<Options>) => ``Promise<HTMLCanvasElement>;
export default html2canvas;

If you change the last line to:
export = html2canvas;

and import the module like this:
import * as html2canvas from 'html2canvas';

it no longer throws an error.

Hope this helps someone.

[uttahb]

Got the same issue, @dharnen solution helped.

import * as html2canvas from 'html2canvas';
(html2canvas as any)(...).then().catch()

It did the trick for me.

[bmvr]

thank you @uttahb.
Worked for me.

[briancaldass]

Pude resolver el error 'no es una función' que se produce al intentar llamar html2canvas(element, options). Tengo una configuración similar a @JEEVANJGA , usando react 15, typecript y SPFX. Después de descargar los @types para el módulo, el archivo index.d.ts tiene este aspecto originalmente:

import { CloneOptions } from './dom/document-cloner';
import { ResourceOptions } from './core/cache-storage';
import { RenderOptions } from './render/canvas/canvas-renderer';
export declare type Options = CloneOptions & RenderOptions & ResourceOptions & {
backgroundColor: string;
foreignObjectRendering: boolean;
logging: boolean;
removeContainer?: boolean;
};
declare const html2canvas: (element: HTMLElement, options?: Partial<Options>) =>Promise; ``
export default html2canvas;

Si cambia la última línea a:
export = html2canvas;

e importa el módulo así:
import * as html2canvas from 'html2canvas';

ya no arroja un error.

Espero que esto ayude a alguien.

But this is wrong, you can not modify the library because at the time of making npm install or update is overwritten the change made or not? or where do you make the change?

[dharnen]

Hello @briancaldass,

Modifying the downloaded packages is definitely not a preferred solution because of the risk that if the packages get re downloaded the changes made do not persist, which you touched on. That being said once downloaded they are not overwritten, even if you run npm install, as long as your package-lock.json has not been deleted. To relieve the headache of remembering what was changed I created a power shell script that goes into any package I've had to adjust and makes the specified changes. I run this script once after making a branch, or cloning the repo, and installing the packages the first time. Although this is not the best way to handle things it's work for me when handling small errors I've encountered, like the one in this thread.

[DanLatimer]

For me the problem was I'm using TypeScript and the node_modules\html2canvas\dist\types\index.d.ts file is incorrect. It says that they are exporting html2canvas as the default export export default html2canvas;. This is untrue.

I had to use any to get around this as follows:

import * as html2canvasWrong from "html2canvas"
var html2canvas = html2canvasWrong as any as (element: HTMLElement, options?: Partial<html2canvasWrong.Options>) => Promise<HTMLCanvasElement>

[Remusqs1]

For me the problem was I'm using TypeScript and the node_modules\html2canvas\dist\types\index.d.ts file is incorrect. It says that they are exporting html2canvas as the default export export default html2canvas;. This is untrue.

I had to use any to get around this as follows:

import * as html2canvasWrong from "html2canvas"
var html2canvas = html2canvasWrong as any as (element: HTMLElement, options?: Partial<html2canvasWrong.Options>) => Promise<HTMLCanvasElement>

This worked for me, thanks!