Sweetalert2: support server side rendering

Created on 26 Feb 2017 · 25Comments · Source: sweetalert2/sweetalert2

people who will try to import this lib in their "react" applications with SSR, will likely receive an error like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js error</title>
  </head>
  <body style="background-color: #a6004c;color: #efe;font-family: monospace;">
    <h2>Vue.js error</h2>
    <pre>ReferenceError: document is not defined
    at /home/landan/www/adonuxt-rp/node_modules/sweetalert2/dist/sweetalert2.js:350:25
    at /home/landan/www/adonuxt-rp/node_modules/sweetalert2/dist/sweetalert2.js:364:2
    at defaultParams.title (/home/landan/www/adonuxt-rp/node_modules/sweetalert2/dist/sweetalert2.js:6:82)
    at Object.&lt;anonymous&gt; (/home/landan/www/adonuxt-rp/node_modules/sweetalert2/dist/sweetalert2.js:9:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require^this is what I get when I import swal2 in an [adonuxt project](https://github.com/nuxt/adonuxt) (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (__vue_ssr_bundle__:9107:18)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:4425:70)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.&lt;anonymous&gt; (__vue_ssr_bundle__:7298:3)</pre>
  </body>
</html>

^ this is what I get when I import swal2 in an adonuxt project

I'm unsure if making this lib "universal"/"isomorphic" is possible or feasible since it will serve no purpose running in node.js

the workaround to this is to import the lib using link and script tags

or to do this

// all non SSR compatible libs have to be imported something like this
if (typeof window !== 'undefined') {
  const swal = require('sweetalert2');
}

^ Oddly this worked for me using the original sweetalert, but not swal2

feature

Source

lmj0011

👍2

Most helpful comment

This works for me:

let swal;
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    swal = require('sweetalert2').default;
}

Just be sure to null-check swal everywhere you use it, or create a simple wrapper around it :-)

StephanBijzitter on 9 Apr 2017

👍3 🎉2 ❤1

All 25 comments

I'm not particularly proficient in SSR; could you perhaps provide an example repository containing the minimal setup to reproduce the error?

birjolaxew on 28 Feb 2017

👍2

I am building an isomorphic react app with both server/client rendering and had this same issue. I will see if I can throw a quick sample app together to show the issue.

afreeland on 1 Mar 2017

Here is a Sample App that tries to implement sweetalert and should illustrate the issue. I thought I would use a react/babel boilerplate starter app for quickness, so I apologize for all the unnecessary structure.

If you look at my last commit I added:
import {default as swal} from 'sweetalert2';

In the following file (which is the default page)
src/routes/home/index.js

Hope this helps to show the issue.

afreeland on 1 Mar 2017

👍1

@lmj0011 It's hard to add the SSR support as swal2 uses the document object a lot.

A workaround mentioned by you:

// all non SSR compatible libs have to be imported something like this
if (typeof window !== 'undefined') {
  const swal = require('sweetalert2');
}

should work. Could you please confirm it doesn't work with the latest version? If so, is there any error/exception?

Thanks in advance!

limonte on 2 Apr 2017

I will try to test this, sometime this week.

lmj0011 on 3 Apr 2017

👍1

still doesn't work. You might want to see how sweetalert 1 is doing this.

if (typeof window !== 'undefined') {
  const swal = require('sweetalert2');
}

doing this in sweetalert2, swal will be undefined

importing it the es6 way

import swal from 'sweetalert2'

results in

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js error</title>
  </head>
  <body style="background-color: #a6004c;color: #efe;font-family: monospace;">
    <h2>Vue.js error</h2>
    <pre>ReferenceError: document is not defined
    at __vue_ssr_bundle__:10598:25
    at __vue_ssr_bundle__:10612:2
    at module.exports.defaultParams.title (__vue_ssr_bundle__:10252:27)
    at Object.&lt;anonymous&gt; (__vue_ssr_bundle__:10255:2)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:4947:70)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.&lt;anonymous&gt; (__vue_ssr_bundle__:8098:3)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:1838:5)</pre>
  </body>
</html>

lmj0011 on 4 Apr 2017

❤1 👍1

Hi guys,
Great job with this module by the way.
I have the same issue.

I've installed swal through npm and I get also swal is not defined. Doing it like this also:

if (typeof window !== 'undefined') {
  const swal = require('sweetalert2');
}

hleote on 4 Apr 2017

👍2

@toverux do you have any clue about this issue?

limonte on 4 Apr 2017

This works for me:

let swal;
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    swal = require('sweetalert2').default;
}

Just be sure to null-check swal everywhere you use it, or create a simple wrapper around it :-)

StephanBijzitter on 9 Apr 2017

👍3 🎉2 ❤1

for those using nuxt.js or something similiar, check to see if you have the option for disabling ssr for your packages.

https://nuxtjs.org/guide/plugins#client-side-only

I haven't tested this yet for swal2

lmj0011 on 9 Apr 2017

👍1

@StephanBijzitter Thanks for your feedback.
In my case it improved but it's still not working as it should.
What I mean is it does trigger the swal and it shows it to me but it doesn't show it how it should, (the alert looks strange), and I'm not able to click ok, I tried with other swals that I have on this component and the problem is the same I'm not able to click the buttons in the alert. Which I really don't understand why it happens. Maybe you guys can point me in the right direction.
The swal2 version that I'm using is 6.6.0.

screen shot 2017-04-10 at 10 27 19

hleote on 10 Apr 2017

@limonte

here, you're trying to access the window object without checking if it's defined first: https://github.com/limonte/sweetalert2/blob/master/dist/sweetalert2.js#L1593

you may want to try changing that line to

if (window && window.Sweetalert2) window.sweetAlert = window.swal = window.Sweetalert2;

swal1 dist file for reference, noticed they're not trying to access the window object outside of the module
https://github.com/t4t5/sweetalert/blob/master/dist/sweetalert-dev.js#L1253

just for reference (probably not be related to the problem):
swal1 gulp bundling task
https://github.com/t4t5/sweetalert/blob/master/gulpfile.js#L74

swal2 gulp bundling task
https://github.com/limonte/sweetalert2/blob/master/gulpfile.js#L28

lmj0011 on 10 Apr 2017

Hi guys,
Any news regarding this issue?
Regards

hleote on 19 Apr 2017

Has this been fixed? I just tried doing some SSR and really want to use this library, but may not be able to since SSR is more important.

tbaustin on 1 Nov 2017

~This should be working on the v7 release see: minimal-repo using react-dom~

acupofjose on 16 Nov 2017

Just kidding. I'm using react dom - which isn't server side rendering

acupofjose on 16 Nov 2017

😄1

Sorry for the stupid question, but I need to go ahead and ask it.

Why will someone need the SSR support for popups? What are benefits of rendering popups on the server-side?

limonte on 21 Nov 2017

@limonte For me, I don't need the popups to be rendered, but right now even including the code causes the entire page to crash on the server. I'd be happy with it not rendering, as long as it doesn't crash. Now we need to add our own safe-guards while requiring sweetalert2 to prevent it from crashing the page, which is not quite ideal.

StephanBijzitter on 21 Nov 2017

👍1

This is the valid poind, thank you @StephanBijzitter

limonte on 21 Nov 2017

Fixed in v7.0.5 :rocket:

My apologies it took so long :disappointed:

limonte on 25 Nov 2017

I have this issue as well :

 Unhandled Rejection at: Promise Promise {
I20171206-12:22:59.036(1)?   <rejected> ReferenceError: document is not defined
I20171206-12:22:59.036(1)?     at /home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:1786:18
I20171206-12:22:59.036(1)?     at /home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:1803:2
I20171206-12:22:59.037(1)?     at styles (/home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:6:82)
I20171206-12:22:59.037(1)?     at Object.<anonymous> (/home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:9:2)
I20171206-12:22:59.037(1)?     at Module._compile (module.js:612:30)
I20171206-12:22:59.037(1)?     at Object.Module._extensions..js (module.js:623:10)
I20171206-12:22:59.037(1)?     at Module.load (module.js:531:32)
I20171206-12:22:59.038(1)?     at tryModuleLoad (module.js:494:12)
I20171206-12:22:59.038(1)?     at Function.Module._load (module.js:486:3)
I20171206-12:22:59.038(1)?     at Module.require (module.js:556:17) } reason: ReferenceError: document is not defined
I20171206-12:22:59.038(1)?     at /home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:1786:18
I20171206-12:22:59.038(1)?     at /home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:1803:2
I20171206-12:22:59.039(1)?     at styles (/home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:6:82)
I20171206-12:22:59.039(1)?     at Object.<anonymous> (/home/alexis/Bureau/mafiledattente/node_modules/sweetalert2/dist/sweetalert2.all.js:9:2)
I20171206-12:22:59.039(1)?     at Module._compile (module.js:612:30)
I20171206-12:22:59.039(1)?     at Object.Module._extensions..js (module.js:623:10)
I20171206-12:22:59.039(1)?     at Module.load (module.js:531:32)
I20171206-12:22:59.039(1)?     at tryModuleLoad (module.js:494:12)
I20171206-12:22:59.040(1)?     at Function.Module._load (module.js:486:3)
I20171206-12:22:59.040(1)?     at Module.require (module.js:556:17)

alexismoreau on 6 Dec 2017

Hello @alexismoreau and thanks for reporting your issue! Could you please try to install the latest version (7.0.8) and test it out - the issue should be fixed.

limonte on 7 Dec 2017

Hello,
I can confirm that it works !
Thank you

alexismoreau on 7 Dec 2017

🎉1

It happens again with the latest version (v7.1.2)

/Users/lookis/Projects/tmp/test/node_modules/sweetalert2/dist/sweetalert2.all.js:1570
if (_typeof(window._swalDefaults) === 'object') {
            ^

ReferenceError: window is not defined
    at /Users/lookis/Projects/tmp/test/node_modules/sweetalert2/dist/sweetalert2.all.js:1570:13
    at styles (/Users/lookis/Projects/tmp/test/node_modules/sweetalert2/dist/sweetalert2.all.js:6:82)
    at Object.<anonymous> (/Users/lookis/Projects/tmp/test/node_modules/sweetalert2/dist/sweetalert2.all.js:9:2)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)