fix: anonymous missing template or render function warning #1353
Conversation
…omponent warning The EmbeddableBlueskyPost plugin was client-only (.client.ts), meaning the component was unregistered during SSR when unplugin-vue-markdown compiles the blog.md files. This produces the "missing template or render function" warning. Convert the component and plugin to be included during SSR but use <ClientOnly> for browser-only rendering.
The oembed endpoint used a raw fetch and is missing the `/xrpc` path prefix. This causes a 502 error when trying to fetch embeds. We can use the typed client to be consistent with author-profiles and other atproto api routes. And means we don't need to specify the /xrpc path in the fetch.
…arity Add a comment to hopefully clarify how useBlueskyAuthorProfiles works with the bluesky-author-profiles server end point.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
There was a problem hiding this comment.
By removing .client this component will now appear during SSR for unplugin-vue-markdown to pick up when it's compiling the blog posts. But the <ClientOnly> tag should mean it's only rendered by the browser.
There was a problem hiding this comment.
- Feel free to correct my Nuxt/Vue ignorance on anything I say.
- My understanding is that Nuxt's
.client.vuesuffix is equivalent to the Nuxt<ClientOnly>wrapper component, so they're interchangeable in this regard.
https://nuxt.com/docs/4.x/directory-structure/app/components#client-components - Is the only reason to move the component to server-side to ensure it is picked up by
unplugin-vue-markdown? - The
app/plugins/bluesky-embed.tsbelow should already be doing the work of registering the component during the build process.
There was a problem hiding this comment.
My understanding is that Nuxt's .client.vue suffix is equivalent to the Vue wrapper component, so they're interchangeable in this regard.
They are very similar, but adding .client to the component means the entire component won't be available during SSR. While when we specify ClientOnly tag it's only applied at the usage site. So the component is still available during SSR with ClientOnly.
Is the only reason to move the component to server-side to ensure it is picked up by unplugin-vue-markdown ?
Yup!
The app/plugins/bluesky-embed.ts below should already be doing the work of registering the component during the build process.
That's true, my change doesn't do anything regarding registering the component. But we still need to import the plugin during ssr rather than only client side.
Side note: I was looking at unplugin-vue-components and this might be something we can add in the future so we don't have to explicitly import a global component.
There was a problem hiding this comment.
- I'm not sure I understand the distinction well enough to see the value add here, but if it satisfies a need or resolves a bug, then send it!
- I tried to make it work with
unplugin-vue-componentsin an earlier attempt but it was unsuccessful so more power to you if you get it to.
|
Thank you!!!!!!! |
3 participants
This PR also makes some other fixes:
BLUESKY_APIwhich now omits thexrpcurl.Note
I'm adding a new lex type so you will need to rerun
pnpm generate:lexiconsorpnpm installto pull in the new types.Testing
Anonymous missing template warning
Before the change, console shows the missing template warnings:
Screenshot
After changes, no errors in the console:
Screenshot
Bluesky embeds
Before the change, my bluesky embeds were not loading with a 502 error:
Screenshot
After the change, I can see the bluesky embed:
Screenshot
Author profile images
Tested that OG image still loads author profiles