Unable to set global "document" available to imported ts

[cryptographix]

I am setting globalThis.document in my main.ts and expected this to be available to imported modules, but get an error when I execute:

deno run -c tsconfig.json main.ts

error: Uncaught ReferenceError: document is not defined

Is this behaviour correct? Is there another way to inject globals, to implement SSR for example via a simulated DOM?

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": [
      "dom",
      "esnext"
    ]
  }
}

main.ts:

globalThis.document = {} as any;
window.document = {} as any;

import {
  attr,
  customElement,
  FASTElement,
  html,
  Observable,
} from "https://cdn.skypack.dev/@microsoft/fast-element?dts";

[kitsonk]

This is not a Deno issue, it has to do with module instantiation order with ES modules. The modules you are importing get instantiated before the module that imports it, meaning the code in the imported module runs before the code in the main.ts.

If you want something like this to work, you need to create something like globals.ts:

globalThis.document = {} as any;

And then in your main.ts:

import "./globals.ts";


import {
  attr,
  customElement,
  FASTElement,
  html,
  Observable,
} from "https://cdn.skypack.dev/@microsoft/fast-element?dts";

[cryptographix]

Thanks for the help!