sveltejs/sapper

ReferenceError: EventSource is not defined

silvioprog opened this issue · 2 comments

silvioprog commented

It seems the EventSource feature doesn't work in a Sapper application.

Consider the following pure HTML/JS test:

cat index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SSE</title>
</head>
<body>
<p id="result">Please wait ...</p>
<script>
  const es = new EventSource("https://stream.wikimedia.org/v2/stream/recentchange");
  es.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data;
  };
</script>
</body>
</html>

as you can see, it works like a charm, just by opening the index.html on your favorite browser.

Now, create a new Sapper application, and change its index.svelte to use EventSource:

npx degit "sveltejs/sapper-template#rollup" my-app

change the index.svelte:

...
<h1>Great success!</h1>

+ <script>
+   const es = new EventSource("https://stream.wikimedia.org/v2/stream/recentchange");
+   es.onmessage = function(event) {
+     console.log(event.data);
+   };
+ </script>
cd my-app
npm install
npm run dev & open http://localhost:3000

it will raise the following error:

500
EventSource is not defined

ReferenceError: EventSource is not defined
    at .\testesse\my-app\src\routes\index.svelte:42:17
    at Object.$$render (.\testesse\my-app\node_modules\svelte\internal\index.mjs:1341:23)
    at Object.default (.\testesse\my-app\src\node_modules\@sapper\internal\App.svelte:24:50)
    at .\testesse\my-app\__sapper__\dev\server\server.js:421:66
    at Object.$$render (.\testesse\my-app\node_modules\svelte\internal\index.mjs:1341:23)
    at .\testesse\my-app\src\node_modules\@sapper\internal\App.svelte:20:18
    at $$render (.\testesse\my-app\node_modules\svelte\internal\index.mjs:1341:23)
    at Object.render (.\testesse\my-app\node_modules\svelte\internal\index.mjs:1349:33)
    at .\testesse\my-app\src\node_modules\@sapper\server.mjs:4687:54
    at Generator.next (<anonymous>)
stephane-vanraes commented

EventSource is a web specific addition to JavaScript and is not available for node.
In Sapper a first render is done on the server using Node, so you will get the message that EventSource is not defined (because it isn't).
To get around this ensure this code is only executed client side (for instance by evoking it in a onMount block)

silvioprog commented

@stephane-vanraes, it solved the problem. Thank you very much! 👍