Otherwise, the serve command was failing with the below error.
ReferenceError: HTMLElement is not defined
at file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/api/card.04a6f554.js:204:752
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:305:29
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:275:7
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:233:5
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:200:5
As such, when Lit runs in Node, it automatically uses a set of minimal DOM APIs necessary to render Lit on the server, and defines the customElements global.
Maybe #1187 will handle this by default? Should look into it.
<!-- ssr-client lit-element-hydrate-support should be loaded first. -->
<script type="module" src="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"></script>
Otherwise we were getting double rendering in the browser
customElements.define conflict ⚠️
Haven't seen this in any of my other demos with WCC, but if you load the home page and click the more products button, the page will crash the following error can be seen in the terminal, meaning this happening in NodeJS land. (Maybe this is why workers are good - #1117 )
Error: Failed to execute 'define' on 'CustomElementRegistry': the name "app-card" has already been used with this registry
at CustomElementRegistry.define (file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/lit-element.2f782e55.js:220:23)
at file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/api/card.658da880.js:11316:16
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:305:29
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:275:7
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:233:5
at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:200:5
edit: ah, the Lit implementation specifically fails on multiple customElements.define calls, which in all fairness is to the spec. Wonder if WCC should impose this restriction too? Would add more overhead though... 🤔
We may want to revisit the SSR docs on their recommendation of running in a VM module vs a Worker.
Details
The specific set of fixes and enhancements will need to implement are
Upgrade Lit to v3
Refactor renderToString to use new collectResult SSR API
Will want to add @lit-labs/ssr-client as dependency
Summary
Was making a demo for Lit SSR on Vercel serverless functions and ran into a few issues. (check out the patches/ folder) in
Node Resolution
We will need to add
node
as a default bundlingexport
condition or else the DOM shim wont come in. This would be needed for SSR pages and API routes.Otherwise, the
serve
command was failing with the below error.This is called out in the Lit SSR docs
Maybe #1187 will handle this by default? Should look into it.
SSR Client Script
Looks we were missing the addition of the SSR client hydration script from our output
Otherwise we were getting double rendering in the browser
customElements.define
conflict ⚠️Haven't seen this in any of my other demos with WCC, but if you load the home page and click the more products button, the page will crash the following error can be seen in the terminal, meaning this happening in NodeJS land. (Maybe this is why workers are good - #1117 )
We may want to revisit the SSR docs on their recommendation of running in a VM module vs a Worker.
Details
The specific set of fixes and enhancements will need to implement are
renderToString
to use newcollectResult
SSR APIgetBody
API for pages, since there is no "Server Components Only" option with Litexport const hydration = true
export const function loader() => { /* ... */ }
type="module-shim"
🤔