Error importing Lit element via automatic include when NOT using the Lit SSR plugin

[lschierer]

when NOT using the lit SSR plugin, and defining an SSR page using the HTML element method per https://greenwoodjs.dev/docs/pages/server-rendering/'s recommended default, you get the following error when you import a lit-element for use in your page.

the html to reproduce might not be exactly right as I did this on the fly here to summarize what I hit with a more complicated element, but it should be close.

/src/components/CustomElement.ts :

import { LitElement, html,  } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("custom-element")
export default class CustomElement extends LitElement {

render() {
return html`<div> test</div>`
}
}

/src/pages/somePage.ts :

import "../components/CustomElement.ts"

export default class MyPage extends HTMLElement { 
connectedCallback() {
this.innerHTML = `
<div>
 <custom-element>
</div>
`
}
}

TypeError [Error]: r.createTreeWalker is not a function
    at <anonymous> (/Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/lit-html@3.2.1/node_modules/lit-html/src/lit-html.ts:716:18)
    at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
    at async executeRouteModule (file:///Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/@greenwood+cli@0.31.0/node_modules/@greenwood/cli/src/lib/execute-route-module.js:17:20)
    at async executeModule (file:///Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/@greenwood+cli@0.31.0/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:6:16)
    at async MessagePort.<anonymous> (file:///Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/@greenwood+cli@0.31.0/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:12:3)
^C ELIFECYCLE  Command failed with exit code 130.

[lschierer]

ProjectEvergreen/www.greenwoodjs.dev#178

[lschierer]

Basically I consider this user error on my part, but am submitting a clarification that would have made my mistake obvious.

[thescientist13]

Sorry, is this related to the getFrontmatter imports option, or something else?

I'm not quite sure I understand what this issue is reporting, but if it's the case that you're trying to use Lit components in an SSR (page) context then that is what the Lit renderer plugin is for. At this time you can only use one SSR rendering option at a time, however you can always include <script> or <link> tags in getLayout result, in addition to using getFrontmatter so as to only load these components on the client side and not via SSR.

[lschierer]

This is what happens when you are (like me) stupid and forget which files can be included and which you need to write script or link tags for. Its the reason why I included the comment about not forgetting in PR # 178.

[thescientist13]

Ok, thanks for clarifying!

Since this is just a matter of clarifying on docs / usage, we can keep chatting in the website PR then.