`document is not defined` related to CustomEvents

[timwis]

I'm experiencing an odd issue... after a while of running my bankai server (generated by create-choo-app version ^9.0.0-1), I stopped it, and now I can't start it back up.

First, I got an error about window not being defined in the context of window.EventSource('sse').

Recognising this as part of choo-reload, I disabled that plugin. Now I'm getting an error about document not being defined in the context of document.createEvent.

I've tried removing a bunch of my code, and reinstalling all dependencies, and I'm still getting the issue. Any idea why?

[toddself]

Off the top of my head it looks like something that shouldn't be running on the server is running on the serve hence the document & window issues.

Are you trying to do server side rendering? Does bankai even support that?

[timwis]

No, I'm not, just a basic create choo app

[yoshuawuyts]

Bankai does server rendering out of the box now; hence this code failing. Should check with typeof window !== 'undefined' before calling that function

[bcomnes]

The featured choo example fails with bankai 9 because of this. If we expect people to check for window, we should add that to the example me thinks. That or we handle this inside of choo.mount.

[timwis]

Yeah I wasn't calling that function; I just did create-choo-app. I think it's being thrown by one of the deps?

Regarding SSR being enabled by default, is that relevant to people using bankai as a dev server, or is it an optimisation? I've personally not had to use SSR yet. I wouldn't mind getting it as a free bonus, but it also means I don't consider the implications of window being absent when I'm just throwing a basic UI together. So I wonder how we'd make that more clear, perhaps in the errors, or maybe make it so that if SSR fails the client code still runs rather than the whole app dying?

[timwis]

So it looks like the CustomEvent was tied to dragula's use of the crossevent library. Disabling dragula made it work, though that means I can't use dragula with bankai.

The first screenshot, though, dealt with choo-reload. I'll try to reproduce it again.

[louiscenter]

I spent the last couple of hours trying to debug an issue which I think is related to this ticket, but I'm not using create-choo-app, or bankai@next.

I did a fresh npm install --save choo bankai. This installs choo 6.0.0 and bankai 8.1.1. I tried running the following block of code:

var choo = require('choo')
var html = require('choo/html')

var app = choo()

app.route('/', hello)
document.body.appendChild(app.start()

function hello (state, emit) {
  return html`<div>Hello world</div>`
}

bankai crashes and returns ReferenceError: document is not defined. Following the suggestion in this thread, I then ran the following block of code:

var choo = require('choo')
var html = require('choo/html')

var app = choo()

app.route('/', hello)

if (typeof window !== 'undefined') {
  document.body.appendChild(app.start())
}

function hello (state, emit) {
  return html`<div>Hello world</div>`
}

Note: the same issue with the same fix will occur if you're using app.mount() too.

This code now works, but I'm still very confused as to why there has to be a window check even when using bankai 8.1.1 which doesn't seem to do anything SSR related.

Is there a dependency that both bankai 8.1.1 and bankai@next are both using that has caused bankai 8.1.1 to break without a window check?

This has me concerned because if you don't do a window check (which isn't mentioned in either the choo README or the bankai README), your app breaks, and there's no obvious explanation as to why. If you were a new user trying the choo/bankai stack for the first time, I feel it would be somewhat confusing.