import { getContentByRoute } from "@greenwood/cli/src/data/queries.js";
import styles from "./side-nav.module.css";
export default class SideNav extends HTMLElement {
async connectedCallback() {
const heading = this.getAttribute("heading");
const route = this.getAttribute("route");
const currentRoute = this.getAttribute("current-route");
// route gets used somewhere down here...
}
}
customElements.define("app-side-nav", SideNav);
Will result in an error because route is undefined
{ route: undefined, heading: undefined }
TypeError [Error]: Cannot read properties of undefined (reading 'data')
at file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/components/side-nav/side-nav.js:20:28
at Array.forEach (<anonymous>)
at SideNav.connectedCallback (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/components/side-nav/side-nav.js:13:13)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async initializeCustomElement (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/wc-compiler/src/wcc.js:218:5)
at async renderFromHTML (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/wc-compiler/src/wcc.js:259:5)
at async executeRouteModule (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/execute-route-module.js:13:22)
at async executeModule (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:6:16)
at async MessagePort.<anonymous> (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:12:3)
Summary
Noticed in https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/94 that something simple when pre-rendering
Will result in an error because
route
isundefined
Details
It actually looks like for
renderFromHTML
that we are double instantiating dependencies throughinitializeCustomElement
which callsconnectedCallback
, when all we really need is to just trigger callingcustomElements.define
, as the real rendering happens inrenderComponentRoots
.