StencilJs component not render in another stenciljs project

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: './../',
    },
  ],

Are you importing a specific path or is it just the name of the package? — Thomas
@Thomas: the name of the package, Ive tried something a bit more specific, but I got some errors; if it’s imported like that it doesn’t complain — RGLSV
That should be correct. Not sure if this will help but try moving the import to src/global/app.ts. — Thomas

RGLSV RGLSV · Accepted Answer · 2020-12-22T21:31:22

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.

StencilJs component not render in another stenciljs project

1 Answers