document is not defined

[lancedikson]

Hi there! I have a problem:

ember fastboot --serve-assets
version: 1.13.8
Built project successfully. Stored in "fastboot-dist".
DEPRECATION: `ember-cli/lib/errors/silent.js` is deprecated, use `silent-error` instead.
DEPRECATION: `ember-cli/lib/errors/silent.js` is deprecated, use `silent-error` instead.
DEPRECATION: `ember-cli/lib/errors/silent.js` is deprecated, use `silent-error` instead.
document is not defined
ReferenceError: document is not defined
    at <anonymous>:139924:54
    at <anonymous>:136465:9
    at <anonymous>:136467:2

Can you help me?

[rwjblue]

Yep, this is a pretty common issue. In the node environment there is no document (or window for that matter). Any code that you write or include that attempts to use document/window/etc will throw an error.

Ultimately, you need to track down what is trying to access document and add a guard to allow it to run without error when ran in node. There is no silver bullet here.

[lancedikson]

@rwjblue, ok. Thank you.

[mrinterweb]

I'm running into the same issue. Many, maybe even most, ember applications are going to run into this problem with some 3rd party library eventually. I don't know if it is possible to catch exceptions related to document or window not being available. Maybe there is a way to mock the global document and window objects, but I have a feeling that would be very difficult to decently mock.

Just quickly googling around, I found this https://github.com/darrylwest/mock-browser. I have no idea if that would be helpful.

I don't know if this issue should be closed. It is something, I think, that will need to be addressed before fastboot can be a viable solution for many Ember applications.

[NullVoxPopuli]

@mrinterweb I think explicitness of behavior is valuable when it comes to fastboot:

import RSVP from 'rsvp';
import Route from '@ember/routing/route';
import { service } from '@ember-decorators/service';

import IntlService from 'ember-intl/services/intl';
import RelayConnection from 'emberclear/services/relay-connection';
import IdentityService from 'emberclear/services/identity/service';

import { disableInFastboot } from 'emberclear/src/utils/decorators';

export default class ApplicationRoute extends Route {
  @service identity!: IdentityService;
  @service relayConnection!: RelayConnection;
  @service fastboot!: FastBoot;
  @service intl!: IntlService;

  // TODO: ask to turn on notifications
  // TODO: use that same UI (that slack uses)
  //       for other important things, like.. "disconnected, retrying in..."
  async beforeModel() {
    // TODO: make configurable
    const locale = 'en-us';

    this.intl.setLocale([locale]);

    if (this.fastboot.isFastBoot) { return; }

    await this.identity.load();

    this.removeAppLoader();
  }

  @disableInFastboot({ default: { contacts: [], channels: [] } })
  async model() {
    const contacts = await this.store.findAll('identity', { backgroundReload: true });
    const channels = await this.store.findAll('channel', { backgroundReload: true });

    return RSVP.hash({ contacts, channels });
  }

  @disableInFastboot
  async afterModel() {
    this.relayConnection.connect();
  }

  @disableInFastboot
  private removeAppLoader() {
    const loader = document.querySelector('#app-loader');

    if (loader) {
      loader.remove();
    }
  }
}

so, one thing I'd like to see is a more meaningful errors in prember. Currently have to actually use fastboot normally to see where my document usage isn't guarded

[knownasilya]

Trying to get remark-parse (md to html) to work in fastboot, but not having any luck due to this issue. Is there a solution?
I guess the remark people assume you are using webpack and can configure it a certain way to provide some sort of document?

[knownasilya]

Repro https://github.com/knownasilya/fastboot-dev-require-repro (note how it's importing dev versions of modules)