[ssr] Can't bundle into SSR app because of side-effects

[ryami333]

Description

I understand that this project is inherently incompatible with SSR, but this module can literally not be imported into a NextJS project (for example) because you get the following error:

ReferenceError: window is not defined

This is because of the following lines in shady-render.ts:

if (typeof window.ShadyCSS === 'undefined') {
  compatibleShadyCSSVersion = false;
} else if (typeof window.ShadyCSS.prepareTemplateDom === 'undefined') {
  console.warn(
      `Incompatible ShadyCSS version detected. ` +
      `Please update to at least @webcomponents/webcomponentsjs@2.0.2 and ` +
      `@webcomponents/shadycss@1.3.1.`);
  compatibleShadyCSSVersion = false;
}

If this could be refactored to be side-effect-free (and not depend on window at import-time) then we could do the following without an error:

import { html, render } from "lit-html";

/* Detect SSR: */
if (typeof window !== "undefined") {
  render(
    html`<h1>Hello World</h1>`,
    document.querySelector("[data-app]"))
  );
}

Expected Results

No error thrown by importing the lit-html library in an SSR context.

Actual Results

An error is thrown by importing the lit-html library in an SSR context.

Browsers Affected

Not applicable.

[justinfagnani]

The problem with fixing the window reference is that you'll then hit other references in lit-element, like HTMLElement.

What we're doing in lit-ssr is creating a minimal DOM shim to define the needed APIs: https://github.com/PolymerLabs/lit-ssr/blob/master/src/lib/dom-shim.ts

If you don't want to actually run the code you can have an even more minimal shim.

[ryami333]

I'm not using lit-element, I'm using lit-html (just updated the issue name to reflect this). :) Is my submitted fix invalid?

Just to be clear - I'm not actually invoking render or html during SSR, I just want importing it to not throw an error when window is undefined.

[kevinpschaaf]

Leaving this open to add a Node importability test per this comment: https://app.zenhub.com/workspaces/polymer-project-5ce5a1fc3c14bf6d63636b62/issues/lit/lit/1214#issuecomment-820668662.

[aomarks]

We've just published some pre-releases for Lit which includes #3156. This change means that Lit should now be importable directly from Node, without crashing, without the need to first load the global DOM shim.

You should be able to upgrade with:

npm i lit@^2.3.0-next.1

Note this won't automatically enable any kind of actual SSR of Lit components out-of-the-box, since that requires specific integration with the framework/renderer -- but it should allow you to import without crashing Node.

Also note that this does not automatically globally define any DOM APIs like the global DOM shim does, apart from customElements which is shimmed as a no-op. So if you have any calls like window.addEventListener running at module initialization, that will still error.

If you have a chance to check out this pre-release, that would be great, and please comment here to let us know how that works for you!

[augustjk]

The PR mentioned above has made its way to a stable release so closing this as fixed!