Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!