"window is not defined" error with React / Next.js

[cwbuecheler]

Please follow the general troubleshooting steps first:

• 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:

I'm attempting to use HTML2Canvas in a React app that's built atop Next.js. It seems to be having trouble with the global window variable, which is odd since I'm only importing it in the client side of the app. Here's the code:

// Module Imports
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import html2canvas from 'html2canvas';

// Save function
  handleSave = async () => {
    const { chart } = this.state;
    const { updateChartFunction } = this.props;
    // capture screenshot
    const input = document.getElementById('chartScreenshot');

    html2canvas(input, {
      useCORS: true,
    }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      console.log(imgData);
    });

    await updateChartFunction({ variables: { ...chart } });
  };

Here's the error:

ReferenceError: window is not defined
    at \repo\client\node_modules\html2canvas\dist\html2canvas.js:6873:29
    at \repo\client\node_modules\html2canvas\dist\html2canvas.js:7:85
    at Object.<anonymous> (\repo\client\node_modules\html2canvas\dist\html2canvas.js:10:2)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.html2canvas (\repo\client\.next\server\static\development\pages\editchart.js:3149:18)
    at __webpack_require__ (\repo\client\.next\server\static\development\pages\editchart.js:23:31)
    at Module../components/EditChart.js (\repo\client\.next\server\static\development\pages\editchart.js:457:70)
    at __webpack_require__ (\repo\client\.next\server\static\development\pages\editchart.js:23:31)
    at Module../pages/editchart.js (\repo\client\.next\server\static\development\pages\editchart.js:2760:79)
    at __webpack_require__ (\repo\client\.next\server\static\development\pages\editchart.js:23:31)

And here's the offending line in /dist/html2canvas.js:

    CacheStorage.setContext(window);

I'm absolutely open to the idea that I'm doing something incorrectly or that "this just doesn't work with Next.js" but I'm hoping there's an obvious solution someone knows of!

Specifications:

• html2canvas version tested with: 1.0.0-rc.4
• Browser & version: Chrome Version 76.0.3809.132 (Official Build) (64-bit)
• Operating system: Windows 10

[subhendukundu]

Same issue. I am stuck with this for days now. Tho I am aware of html2canvas cann't be used with nodejs.
Tried with different approaches like
const html2canvas = process.browser ? require('html2canvas') : null;
Not able to get it wokring.

[subhendukundu]

@cwbuecheler,
As you are using next.js
https://stackoverflow.com/questions/55151041/window-is-not-defined-in-nextjs-react-app
and
https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined
will help you.
I am using nodejs for my ssr app, so not sure how to fix that.

[cwbuecheler]

@subhendukundu - thanks. That kind of helps, though unfortunately the error is occurring on the import, not on any usage (even if I put the usage in componentDidMount), so I have to find a workaround for that. I have one, using require instead of import, but that's not my preferred approach. I'll keep working on it, but it'd be nice if html2canvas eventually had some failsafes built in relating to this issue.

[niklasvh]

Should be fixed with #2039

[aio59]

what version is this included?

[JerryLMJ]

Which release fixes the issue?

[nandapdtr]

This issue is still happening in Node application...

[nawazsk]

does this fix exist in 1.0.0-rc.5 ? I'm still having this issue.

[thanhmancity]

only that it's

componentDidMount() { this.html2canvas = require('html2canvas') }

[davidtoral]

still happening with node 12

[hilalarsa]

only that it's

componentDidMount() { this.html2canvas = require('html2canvas') }

this solution works for me on latest nextjs and html2canvas