Lightrun
question-mark
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.

support server side rendering

See original GitHub issue

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

related: https://github.com/t4t5/sweetalert/issues/397

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:25 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
StephanBijzittercommented, Apr 9, 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 😃

3reactions
limontecommented, Mar 18, 2018

We broke SSR. Again. 🤦‍♂️ My apologies to everyone.

To protect the plugin from similar mistakes in future, these actions were taken:

  • released v7.1.3 with the fix
  • created the test case for node env: "check:require-in-node": "node test/require-in-node"

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Enable Server-Side Rendering for a React App
Server -side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending ...
Read more >
Improve app performance with React server-side rendering
Server -side rendering is when content on your webpage is rendered on the server and not on your browser using JavaScript. For example,...
Read more >
Server-Side Rendering in React using Next.js
Server -side rendering with JavaScript libraries like React is where the server returns a ready-to-render HTML page and the JS scripts required ...
Read more >
Server-Side Rendering - Vite
Vite provides built-in support for server-side rendering (SSR). The Vite playground contains example SSR setups for Vue 3 and React, which can be...
Read more >
What is Server-Side Rendering (SSR)? What Frameworks ...
Server -Side Rendering is a method of loading and parsing frontend elements and codes of web applications on the hosted server itself. Back...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Chaining modals (queue) not working on v6.4.3

Next page

calling swal.close() or swal.closeModal() from a separate function does not work