StencilJs 组件不在另一个 stenciljs 项目中呈现

Question

I've created a stenciljs webcomponents using the starter project, and I'm trying to grab it into another stenciljs project, via package.json dependecy, which points to a git repo.

The webcomponent is imported in, but as soon as I try to run the component inside a tsx stenciljs project, I noticed the following:

• the props are not passed in, the css I can see it being applied, but the content is missing
• if I add something extra on the page, like a character or something, the dev server renders the webcomponent (also tried building the project, same behavior)
• the webcomponent also contains some .svgs pushed into .tsx files into return statement, even after adding a character on the page, those icons still don't render

Not sure if Im doing something wrong here, weird enough is that as soon as I add something else on the page, besides that webcomponent, it kinda renders correctly.

I'm importing the webcomponent into a component inside the stenciljs project via:

import 'my-component-from-git' <-- points to the webcomponent folder in node_modules folder

stenciljs webcomponent config:

plugins: [
    sass()
  ],
namespace: 'my-component',
outputTargets: [
  {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],

stenciljs project config:

globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
taskQueue: 'async',
  plugins: [
    sass()
  ],
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null,
      baseUrl: './../',
    },
  ],

Answer 1

After some investigation, the component that I wanted to export as webcomponent, used multiple functional components to render its contents (also same for .svgs ), and after removing these, and using them in the class that exports the webcomponent, it works fine.

Im not totally sure if these something wrong with this, or maybe its not supported properly, or the dist output isn't generated correctly when using functional components .

For the time being, if anyone encounters some wierd rendering issues, when trying to import stencil generated webcomponent, into another stencil project, try to modify a bit your code so it doesn't use these functional components .

Maybe there is something specific about some config that is missing for the webcomponent.