New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: SVGs in functional components won't get rendered when imported dynamically #3953
Comments
Thanks @phhbr! I'm going to label this issue to get it added to the backlog! |
this is there in stencil 3.0 also. I migrated from 1.5 to 3 directly and now seeing this issue. @rwaskiewicz will it be possible for you to please check this :( . SVG is there in dom but doesn't show render in UI. I have a custom path added in tsconfig.json for assets, If I use relative paths then only it works :(. what's with custom defined paths like @myapp/assets |
i meet the same problem in stencil 3.4.0 |
I started some investigations on this. It is unrelated to whether or not the component is an SVG. The problem is that Stencil doesn't handle dynamic components in general due to its build optimizations. I will bring this to the team to discuss potential solutions for this. |
Hey there 👋 I concluded my investigations and consulted with the Stencil team. This is a limitation of functional components within Stencil. We have raised a new issue and ingested this into our backlog, see #5246. To workaround this issue there are the following options:
|
Prerequisites
Stencil Version
2.20.0
Current Behavior
Basic issue
When a stencil web component (icon.tsx), which is using a 'dynamic' stencil functional component (help-icon.tsx) to render a SVG, the svg gets not rendered, or not rendered properly. When adding a hidden svg additionally to the web component, the functional component SVG gets rendered properly.
Observation / current workaround
When adding an additional (hidden) svg, the SvgHelp functional component gets rendered properly.
When using a 'fixed' functional component, ie always help-icon.tsx, the component also gets rendered properly
Another workaround
The tag could be located in the host web component, and the functional component brings the (or other SVG-markup.)
Additional information
According to slack (@johnjenkins), the issue could be with some build time optimizations in here
Expected Behavior
Stencil renders SVGs in functional components out of the box, even when the host web components does not include SVG.
System Info
No response
Steps to Reproduce
web component: icon.tsx
map of functional components
import SvgHelp from "./help";
export const Icons = {
help: SvgHelp
}
functional component: help.tsx
Code Reproduction URL
https://github.com/phhbr/stencil-component-starter-main
Additional Information
I don't know if it's a feature or a bug or just some documentation issue.
The text was updated successfully, but these errors were encountered: