Fix error in server-side rendering (SSR)

[Livven]

A similar PR may already be submitted!
Please search among the Pull request before creating one.

Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

Before opening a pull request, please make sure all the tests pass locally by running npm test.

Summary

This PR fixes/implements the following bugs/features

• html2canvas why not support ssr ，nuxt? #1901
• Reference to window causing fail package load for server side rendering projects #1909
• (possibly) "window is not defined" error with React / Next.js #2015

Explain the motivation for making this change. What existing problem does the pull request solve?

html2canvas causes JavaScript applications that use server-side rendering (e.g. via Next.js, Nuxt, Gatsby, Gridsome) to break as the CacheStorage.setContext(window) call that is executed on import tries to access the window variable that does not exist in Node.

Obviously, this won't fix the actual functionality of taking a screenshot in Node, but it will allow for apps that use SRR to be pre-rendered on the server and then delivered to the client, where it will then be possible to use this library take screenshots.

Test plan (required)

Demonstrate how the issue/feature can be replicated. For most cases, simply adding an appropriate html/css template into the reftests should be sufficient. Please see other tests there for reference.

Code formatting

Please make sure that code adheres to the project code formatting. Running npm run format will automatically format your code correctly.

Closing issues

Fixes #

[gorkemyontem]

Is there any expected merge date for this?

[thomasMary]

@niklasvh could you merge this one 🙏

[Livven]

@gorkemyontem @thomasMary FYI you can use e.g. the awesome patch-package package to patch the offending code out yourself without having to fork the project. It works pretty well and is what we've been doing in lieu of an official fix.

[machadogj]

hi @niklasvh, I can confirm that this fix seems to work, but it's hasn't been published to npm yet. anyway we can get it in npm soon? thanks!

[christianstrang]

This answer worked for me: https://stackoverflow.com/a/59540525/90257

[americool]

Is this up on npm yet?

[esteban89]

Is this up on npm yet?

It seems not, any idea how to fix this error?

[worteepz]

Hello everyone! An error occurs with server side rendering (the window is not defined), how can I update npm module from this pull ?

In the released version v1.0.0-rc.5, there is no this update, it is insanely important for our project!

@Livven

[esteban89]

Hello everyone! An error occurs with server side rendering (the window is not defined), how can I update npm module from this pull ?

In the released version v1.0.0-rc.5, there is no this update, it is insanely important for our project!

@Livven

I updated it manually in html2canvas.js and changed it from:
CacheStorage.setContext(window);
to
if (typeof window !== "undefined") { CacheStorage.setContext(window); }

and that worked, at least for me

[machadogj]

You might want to take a look at dynamic imports with no ssr: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

…

On Thu, May 14, 2020 at 8:30 PM esteban89 ***@***.***> wrote: Hello everyone! An error occurs with server side rendering (the window is not defined), how can I update npm module from this pull ? In the released version v1.0.0-rc.5, there is no this update, it is insanely important for our project! @Livven <https://github.com/Livven> I updated it manually in html2canvas.js and changed it from: CacheStorage.setContext(window); to if (typeof window !== "undefined") { CacheStorage.setContext(window); } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2039 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFD33BVXE2QVAW5XDGFWZ3RRR5KPANCNFSM4JB3W7DA> .

[worteepz]

Hello everyone! An error occurs with server side rendering (the window is not defined), how can I update npm module from this pull ?
In the released version v1.0.0-rc.5, there is no this update, it is insanely important for our project!
@Livven

I updated it manually in html2canvas.js and changed it from:
CacheStorage.setContext(window);
to
if (typeof window !== "undefined") { CacheStorage.setContext(window); }

and that worked, at least for me

Thx for your reply! You edit this in node_modules folder ? Or you load the html2canvas script directly in project folder without npm and edit them ?

[worteepz]

You might want to take a look at dynamic imports with no ssr:

Thx for your reply! In suddenly, i don't use Next.js, in project we use Gatsby.js. I use this method, but it not working for me :(

[esteban89]

Hello everyone! An error occurs with server side rendering (the window is not defined), how can I update npm module from this pull ?
In the released version v1.0.0-rc.5, there is no this update, it is insanely important for our project!
@Livven

I updated it manually in html2canvas.js and changed it from:
CacheStorage.setContext(window);
to
if (typeof window !== "undefined") { CacheStorage.setContext(window); }
and that worked, at least for me

Thx for your reply! You edit this in node_modules folder ? Or you load the html2canvas script directly in project folder without npm and edit them ?

Yes I edited it in node_modules folder

[gaurav-pantelwar]

Hi @esteban89 @worteepz,

for nextjs,
If you are getting > ReferenceError: window is not defined error even after using dynamic imports with no ssr as mentioned by @machadogj, then it may be due to the dependency which requiring window be present and is imported at the top level.

If you remove your import:

import html2canvas from 'html2canvas';  // <-- Remove this line

Usage:

// Use Something like this

async functionToUseHtml2Canvas () {
   const html2canvas = await import("html2canvas") // <-- Import asynchronously
   html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    })
}

Hope it Helps 🙏

I have not tested html2canvas library but some other library which causing the same > ReferenceError: window is not defined error in my nextjs project.
It might work for SSR other than nextjs.

[maxamorim]

@niklasvh any plans to release this fix on npm?

[nlevchuk]

Please bump to new version