Access StencilJS component assets in React

Stencil
1

Hello everyone!

I have a Stencil component using its own assets (images). After I build and publish to npm and install the package in my React app, the assets in the Stencil component won’t work anymore. React tries to find them in the public folder but they are not there: they are located at node_modules\stencil_project_name\dist.

Question: What’s the correct workflow to handle this situation?

2

Did you find a solution to this? I think I’m having a similar issue with my CSS variables defined in src/globals/variables.css.

I can include them in the dist/ build but the CSS doesn’t apply properly to the components.

3

I too have this question. Frustrating there doesn’t seem to be any decent solutions posted

4

It’s very late, 1.5 year late, and I don’t know if you guys found the solution, but I recently faced this. Thought I could help someone who stumbles upon this query.

Not just Stencil components, but in any Node module, you need to copy the assets from your package to the application that uses the package. Meaning if you have a Vue application that uses a Stencil component library as a Node package, you need to write a ‘copy’ task in your Vue application that will copy the images from this package, and put them into its own public or assets directory.

Here is how you can do it:
Bundling Custom Elements with Stencil - Stencil (stenciljs.com)

Look for the making assets available section.

5

Hey rutwick

I am facing the same issue please help.

I have an svg sprite file in asset folder and in stenciljs

<use
xlinkHref={/assets/altiIcons.svg#Search}
href={/assets/altiIcons.svg#Search}>

So this is working fine in stenciljs - checked in both safari and chrome the icon is appearing

So , I have published like npm package and trying to access in react app there it was not working

Thanks,
Mounika.