CODEWITHSUNDEEP
javascriptmoduleweb-componentstenciljsstencil-component
RGLSV
RGLSV

Reputation: 2058

StencilJs component not render in another stenciljs project

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:

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

Upvotes: 5

Views: 941

Answers (1)

RGLSV
RGLSV

Reputation: 2058

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.

Upvotes: 1

Related Questions