warnings emitted about undefined page level custom element tags when pre-rendering SSR pages #988

thescientist13 · 2022-10-22T13:49:35Z

Type of Change

Summary

When using an SSR page + prerender config to generate HTML

import fetch from 'node-fetch';
import '../components/cast-and-crew/cast-and-crew.js';
import '../components/upcoming-events/upcoming-events.js';
import '../components/spotify-playlist/spotify-playlist.js';

export default class Home extends HTMLElement {
  async connectedCallback() {
    const events = (await fetch('https://.../api/events')
      .then(resp => resp.json()))

    this.innerHTML = `
      <tt-upcoming-events
        events='${JSON.stringify(events).replace(/'/g, '\\"')}'
      ></tt-upcoming-events>

      <tt-cast-crew></tt-cast-crew>
      <tt-spotify-playlist></tt-spotify-playlist>
    `;
  }
}

I keep getting warnings in the console that those custom elements for the page are not defined

% yarn clean && yarn build
yarn run v1.22.19
$ rimraf public/ .greenwood/ ./storybook-static
✨  Done in 0.12s.
yarn run v1.22.19
$ NODE_ENV=production greenwood build
-------------------------------------------------------
Welcome to Greenwood (v0.26.1) ♻️
-------------------------------------------------------
Initializing project config
Initializing project workspace contexts
Generating graph of workspace files...
building from local sources...
Running Greenwood with the build command.
pages to generate 
 /
 /404/
generated page... /404/
@@@@ /Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/.greenwood/404.html
WARNING: customElement <tt-upcoming-events> is not defined.  You may not have imported it yet.
generated page... /
@@@@ /Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/.greenwood/index.html
WARNING: customElement <tt-cast-crew> is not defined.  You may not have imported it yet.
WARNING: customElement <tt-spotify-playlist> is not defined.  You may not have imported it yet.
success, done generating all pages!

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
copying directory... src/assets
copying file... src/assets/tuesdays-tunes.webp
copying file... src/assets/fonts/coop-bl.woff2
copying file... src/assets/icons/facebook.svg
copying file... src/assets/icons/spotify.svg
copying file... src/assets/icons/youtube.svg
copying file... src/favicon.ico
copying file... .greenwood/graph.json
✨  Done in 1.50s.

Details

What's interesting is that the page still gets fully generated as expected? All the HTML from those custom elements are visible in the output so "technically" it is a bug but also working as expected? 😅 :what:
AnalogStudiosRI/www.tuesdaystunes.tv#49

OUTDATED
To this point above, I think the technicality we're experiencing is due to during the graph lifecycle, we boot up each page in order to see if it has front matter, so I can see all the code and custom elements loading before the build process even happens.

% yarn clean && yarn build
yarn run v1.22.19
$ rimraf public/ .greenwood/ ./storybook-static
✨  Done in 0.15s.
yarn run v1.22.19
$ NODE_ENV=production greenwood build
-------------------------------------------------------
Welcome to Greenwood (v0.26.1) ♻️
-------------------------------------------------------
Initializing project config
Initializing project workspace contexts
Generating graph of workspace files...
building from local sources...
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/cast-and-crew/cast-and-crew.js
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/upcoming-events/upcoming-events.js
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/spotify-playlist/spotify-playlist.js
Running Greenwood with the build command.
pages to generate 
 /
 /404/
generated page... /404/
@@@@ /Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/.greenwood/404.html
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/cast-and-crew/cast-and-crew.js
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/upcoming-events/upcoming-events.js
!!!!!! FOUND A DEPENDENCY!!!!!!! file:///Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/src/components/spotify-playlist/spotify-playlist.js
WARNING: customElement <tt-upcoming-events> is not defined.  You may not have imported it yet.
generated page... /
@@@@ /Users/analogstudios/Workspace/analogstudios/repos/www.tuesdaystunes.tv/.greenwood/index.html
WARNING: customElement <tt-cast-crew> is not defined.  You may not have imported it yet.
WARNING: customElement <tt-spotify-playlist> is not defined.  You may not have imported it yet.
success, done generating all pages!

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
copying directory... src/assets
copying file... src/assets/tuesdays-tunes.webp
copying file... src/assets/icons/facebook.svg
copying file... src/assets/icons/spotify.svg
copying file... src/assets/icons/youtube.svg
copying file... src/assets/fonts/coop-bl.woff2
copying file... src/favicon.ico
copying file... .greenwood/graph.json
✨  Done in 1.25s.

So that could explain why these modules are already loaded but I thought since they were all in a worker, they would be self contained???? 😕

I guess this implies that SSR us not happening for page level custom elements like in templates/app.html. I wonder if it means we should SSR everything in development, defer to browser rendering as much as possible? That would mean honoring data-gwd-opt and a bunch of optimizations.

I suppose this could be a devServer option to optimize in development to sanity test, and make it false by default?

The text was updated successfully, but these errors were encountered:

thescientist13 · 2022-10-23T18:16:54Z

So did some debugging #989 (comment) and found the root cause. Basically we are over-rendering the page contents, twice to be exactly. So not passing the page deps was keeping it from behaving like this.

Will want to re-think this approach and optimize to see if we can avoid double SSR for pages, might want to attach to v0.27.0 release?

thescientist13 · 2023-12-02T16:31:25Z

Hmm, seeing this now, and this is actually a different issue, but in the greenwood-getting-started repo now too, seemingly after the v0.29.0 release? 🤔

➜  greenwood-getting-started git:(master) npm run build

> greenwood-getting-started@1.0.0 build
> greenwood build

-------------------------------------------------------
Welcome to Greenwood (v0.29.0) ♻️
-------------------------------------------------------
Initializing project config
Initializing project workspace contexts
Generating graph of workspace files...
building from local sources...
Running Greenwood with the build command.
pages to generate
 /blog/first-post/
 /blog/second-post/
 /
 /404/
No custom element class found for this file
generated page... /blog/first-post/
No custom element class found for this file
generated page... /blog/second-post/
No custom element class found for this file
generated page... /
No custom element class found for this file
generated page... /404/
success, done generating all pages!
bundling static assets...
optimizing static pages....
copying directory... src/assets/
copying file... src/assets/greenwood-logo.png
copying file... src/favicon.ico
copying file... .greenwood/manifest.json

I see why now... with the addition of #1135 and us persisting the configuration to the document (and this would likely also apply to GraphQL or static router)

<script>
  globalThis.__GWD_BASE_PATH__ = '';
</script>

This is now being passed as a dependency URL to WCC in renderToHtml and because this script doesn't contain a custom element, it will "trip" this code in WCC which causes the console.log.

So the question is:

Should WCC just ignore / swallow this? Would these chunks be needed to supplement dependencies passed into WCC?
Or should Greenwood be smart enough to figure out the right scripts to send to WCC?

thescientist13 added bug Something isn't working P0 Critical issue that should get addressed ASAP CLI SSR v0.26.2 labels Oct 22, 2022

thescientist13 added this to the 1.0 milestone Oct 22, 2022

thescientist13 self-assigned this Oct 22, 2022

thescientist13 mentioned this issue Oct 22, 2022

make sure to pass SSR page script as part of WCC script dependencies #989

Closed

thescientist13 removed the v0.26.2 label Oct 23, 2022

thescientist13 mentioned this issue Oct 23, 2022

release/0.27.0 #979

Merged

27 tasks

thescientist13 changed the title ~~warnings emitted about undefined custom element tags when pre-rendering SSR pages~~ warnings emitted about undefined page level custom element tags when pre-rendering SSR pages Oct 23, 2022

thescientist13 mentioned this issue Oct 29, 2022

eliminate SSR page instantiation during graph lifecycle #991

Open

thescientist13 added this to [Greenwood] Phase 9 - Standards and Conventions Oct 29, 2022

thescientist13 moved this to 📋 Backlog in [Greenwood] Phase 9 - Standards and Conventions Oct 29, 2022

thescientist13 moved this from 📋 Backlog to 🏗 In progress in [Greenwood] Phase 9 - Standards and Conventions Oct 29, 2022

thescientist13 added bug Something isn't working and removed bug Something isn't working P0 Critical issue that should get addressed ASAP labels Nov 22, 2022

thescientist13 moved this from 🏗 In progress to 🔖 Ready in [Greenwood] Phase 9 - Standards and Conventions Dec 16, 2022

This was referenced Jan 15, 2023

Feature/issue 82 social links bar AnalogStudiosRI/www.tuesdaystunes.tv#115

Draft

duplicate HTML when using prerender and shared components used in both SSR pages and templates #1044

Closed

thescientist13 added the v0.30.0 label Nov 25, 2023

thescientist13 mentioned this issue Dec 2, 2023

"no custom element class found for this file" warning when prerendering with WCC #1185

Closed

thescientist13 mentioned this issue Mar 9, 2024

release/0.30.0 #1208

Merged

39 tasks

thescientist13 linked a pull request Mar 16, 2024 that will close this issue

rfc/issue 955 layouts and pages #1212

Merged

20 tasks

thescientist13 mentioned this issue Mar 16, 2024

rfc/issue 955 layouts and pages #1212

Merged

20 tasks

thescientist13 added the alpha.3 label Jun 2, 2024

thescientist13 moved this from 🔖 Ready to 👀 In review in [Greenwood] Phase 9 - Standards and Conventions Jun 18, 2024

thescientist13 linked a pull request Jun 22, 2024 that will close this issue

release/0.30.0 #1208

Merged

39 tasks

thescientist13 closed this as completed Jun 22, 2024

github-project-automation bot moved this from 👀 In review to ✅ Done in [Greenwood] Phase 9 - Standards and Conventions Jun 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

warnings emitted about undefined page level custom element tags when pre-rendering SSR pages #988

warnings emitted about undefined page level custom element tags when pre-rendering SSR pages #988

thescientist13 commented Oct 22, 2022 •

edited

Loading

thescientist13 commented Oct 23, 2022

thescientist13 commented Dec 2, 2023 •

edited

Loading

warnings emitted about undefined page level custom element tags when pre-rendering SSR pages #988

warnings emitted about undefined page level custom element tags when pre-rendering SSR pages #988

Comments

thescientist13 commented Oct 22, 2022 • edited Loading

Type of Change

Summary

Details

thescientist13 commented Oct 23, 2022

thescientist13 commented Dec 2, 2023 • edited Loading

thescientist13 commented Oct 22, 2022 •

edited

Loading

thescientist13 commented Dec 2, 2023 •

edited

Loading