currently getting "XXXX has no property viewbox, did you mean viewBox" error when compiling. but it works well in dev. i really dont want to translate all the html attributes i have to be astro compatible
#allow custom/native (viewbox, instead of viewBox) in .astro (template)
pastel crow
modest canopyBOT
Hi @pastel crow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro provides built-in utility types for common prop type patterns, including HTML attributes. However, it seems like you're encountering an issue with the casing of certain attributes, specifically viewBox in SVG elements.
Astro's compiler is case-sensitive and follows the HTML and SVG specifications, which use camelCase for certain attributes like viewBox. This is why you're seeing the error message suggesting viewBox instead of viewbox.
If you're using these attributes frequently, you might consider creating a utility function or component to handle the conversion for you.
However, if you're encountering issues with this, it might be worth raising as an issue on the Astro GitHub repository. The Astro team is very responsive to community feedback and might be able to provide further assistance or enhancements to the framework.
Sources:
- Astro Documentation - TypeScript Guide (https://docs.astro.build/en/guides/typescript#type-utilities)
- GitHub Issue - Custom Elements / Web Components with specific attributes (https://github.com/withastro/astro/issues/9717)
- GitHub Issue - Plain HTML template usage breaks Astro (https://github.com/withastro/astro/issues/2509)
- GitHub Issue - html, svg
pathelement is not parsed correctly, giving error (https://github.com/withastro/astro/issues/1615)