Using Stencil components in Stencil components


#1

Hello evereyone,

my general question is, how can i use a stencil built component within another stencil component. Not in the PWA toolkit but in another Component.

More specifically the component i want to use is not on npm, but on a private bitbucket repo. In its package.json there is prepare script (“prepare”:“stencil build”). i then add the component to the parent component in the package.json with a git link. when i run npm install child-component, it fetches the component from bitbucket and builds it with the prepare script. this is working fine. but how do i add a component to be loaded?
someone in the slack channel told me i have to copy the built component from node_modules to the build directoy myself and add an import statement to the root parent component. this is also kind of working. i can see that the child-component.js is fetched when the webapp starts, but it doesn’t get rendered.

does anyone have a clue what the problem could be? i also wasn’t able to add any component from https://stencilcomponents.com. if someone can tell me how to do that, i can probably figure out how to do it with my private bitbucket repo.

thanks in advance and i appreciate any input you might have!

i also posted this question on stackoverflow:


#2

I am getting closer. when copying the built components to my parent build directory and adding the script tags to the index.html it’s working as expected. but i would like that the scripts are bundled with the main component. is this maybe something rollup-plugin-node-resolve can do?