Closed kcole93 closed 1 year ago
Here's a minimal reproduction on Stackblitz
Thanks for the detailed bug report @kcole93!
I'm wondering if this is due to this integration also installing @astrojs/react
. 🤔 I'll try to take a look this week to see what's going on.
I have the same issue with Vue components
Hi Chris, just a heads up that someone else in the Astro discord came across a similar issue with weird Vue errors that were fixed when the order of declaring Vue in astro.config.mjs
is changed, so I think it's safe to say that the issue doesn't rest with the NetlifyCMS integration.
See Issue 4994 in the Astro repo.
Thanks for the heads up @kcole93 — appreciate it! In that case I think we can close this issue.
If anyone else finds themselves here, looking for a quick solution: try moving vue()
after NetlifyCMS()
in your integrations array.
After installing astro-netlify-cms and adding a basic config entry in
astro.config.mjs
, Vue components failed to render as the Vue instance was seemingly not being properly mounted.Fails to render Vue components
Properly renders Vue components
I'm not sure if this is an issue specific to the Astro-Netlify-CMS integration, or if it's on the Astro / Astro Vue integration side of things. However, it was difficult to figure out the cause other than that it having occurred after setting up Astro-Netlify-CMS.
In case it helps to identify the source, here's the error messages I was getting.
When rendering Vue components without a client directive:
[plugin:vite:vue] Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)
When they are passed a client:only directive:
Vue warn: Component is missing template or render function
Perhaps it's worth mentioning in the installation / config instructions that this can be resolved by declaring the Astro-Netlify-CMS integration prior to Vue.