vite: [astro-ci] Lit element SSR failure

Describe the bug

We are receiving a window is not defined error when using our Lit Element SSR renderer. This is likely a problem with Vite respecting our shims for browser globals like window.

Reproduction

(see logs)

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 304.47 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.1

Used Package Manager

pnpm

Logs

Run pnpm build and pnpm link --global from ~/repos/vite/packages/vite
Run pnpm link --global vite from ~/repos/astro/packages/astro
Run pnpm dev (or build) from ~/repos/astro
Run a known failing test, like pnpm test:match "Lit integration in SSR
Hit the following error:

ReferenceError: window is not defined
      at file:///Users/benholmes/Repositories/astro/node_modules/.pnpm/@lit+reactive-element@1.3.3/node_modules/@lit/reactive-element/css-tag.js:6:9
      at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
      at async Promise.all (index 0)
      at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
      at async Object.loadTestAdapterApp (file:///Users/benholmes/Repositories/astro/packages/astro/test/test-utils.js:155:36)
      at async fetchHTML (file:///Users/benholmes/Repositories/astro/packages/astro/test/ssr-lit.test.js:22:15)
      at async Context.<anonymous> (file:///Users/benholmes/Repositories/astro/packages/astro/test/ssr-lit.test.js:31:16)

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (14 by maintainers)

Most upvoted comments

Ok, I think I understand now: a package needs partial externalization if some files are source files (= noExternal) while other files need to be deduped (= external).

brillout on Jul 21, 2022

@matthewp looks like Vite v2 indeed allowed to define both specific entries in ssr.external and package names (and in that case every entry is external). I’ll send a PR soon to correct this regression, so your PR to Astro shouldn’t be needed once 3.0.3 is out. Sorry for these changes (I know they are borderline breaking changes for 3.0, but this wasn’t an intended change).

I’m curious though about why you needed the ssr.external in Vite 3. Are you setting noExternal: true? I think they should be externalized by default and you could remove the config. If that doesn’t work maybe there is a bug in the new externalization logic.

patak-dev on Jul 21, 2022

It would be nice if you could configure this scenario with some sort of config. I could see some config like sourceExtensions: ['.astro', '.vue'] which would noExternal anything imported that way. Then you wouldn’t need to use external or noExternal very often.

matthewp on Jul 22, 2022