@astrojs/lit breaks @astrojs/cloudflare builds

[chaffinated]

What version of astro are you using?

2.3.0

Are you using an SSR adapter? If so, which one?

Cloudflare

What package manager are you using?

yarn

What operating system are you using?

Mac

What browser are you using?

Brave

Describe the Bug

When deploying via GitHub, the astro project builds successfully, but fails at deploying the CF function.

No lit components are used in the project; simply adding lit to the integrations field in the config seems to break deployments.

The error from Cloudflare: Error: Failed to publish your Function. Got error: Uncaught ReferenceError: window is not defined at functionsWorker-xxxx.js:2140:10

A snippet of what could be the offending code in the build:

var ea = window,
  aa =
    ea.ShadowRoot &&
    (ea.ShadyCSS === void 0 || ea.ShadyCSS.nativeShadow) &&
    "adoptedStyleSheets" in Document.prototype &&
    "replace" in CSSStyleSheet.prototype,
  Fn = Symbol(),
  Sn = new WeakMap(),
  ta = class {
    constructor(t, a, u) {
      if (((this._$cssResult$ = !0), u !== Fn))
        throw Error(
          "CSSResult is not constructable. Use `unsafeCSS` or `css` instead.",
        );
      (this.cssText = t), (this.t = a);
    }
    get styleSheet() {
...

This is apparently from the Lit library itself.

I'll keep digging in to see what I can find out, but I'd greatly appreciated any help!

Link to Minimal Reproducible Example

https://github.com/chaffinated/astro-lit-cloudflare-repro

Participation

• [x] I am willing to submit a pull request for this issue.

[chaffinated]

I believe I've narrowed this down to the package.json exports field in the lit package and the way the bundler resolves the package. The server-friendly exports of lit-html and @lit/reactive-element are kept under the conditional node in the exports field:

{
  "name": "lit-html",
  "version": "2.7.2",
  "description": "HTML templates literals in JavaScript",
  "license": "BSD-3-Clause",
  "repository": {
    "type": "git",
    "url": "https://github.com/lit/lit.git",
    "directory": "packages/lit-html"
  },
  "author": "Google LLC",
  "homepage": "https://lit.dev/",
  "main": "lit-html.js",
  "type": "module",
  "exports": {
    ".": {
      "types": "./development/lit-html.d.ts",
      "node": {
        "development": "./node/development/lit-html.js",
        "default": "./node/lit-html.js"
      },
      "development": "./development/lit-html.js",
      "default": "./lit-html.js"
    },
    "./async-directive.js": {
      "types": "./development/async-directive.d.ts",
      "node": {
        "development": "./node/development/async-directive.js",
        "default": "./node/async-directive.js"
      },
      "development": "./development/async-directive.js",
      "default": "./async-directive.js"
    },
...

It appears that resolve.conditions in the Astro config file is not respected when building with config file:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
import tailwind from "@astrojs/tailwind";
import lit from "@astrojs/lit";

// https://astro.build/config
export default defineConfig({
  output: 'server',
  integrations: [
    tailwind(),
    lit(),
  ],
  adapter: cloudflare({ mode: 'directory' }),
  vite: {
    ssr: {
      noExternal: [
        '@lit/reactive-element',
        'lit-html',
        'lit',
      ],
    },
    resolve: {
      conditions: ['node'],
    },
  },
});

[chaffinated]

This should be resolved with this PR: withastro/astro#6915

[alexanderniebuhr]

Can we confirm that this is still an issue.

[alexanderniebuhr]

Closing because it is stale & superseded by https://github.com/withastro/adapters/issues/56