[Stencil] Publishing a Stencil component to npm

Does anyone know how to publish a Stencil 0.2.3 component to npm? I can’t seem to follow the documentation correctly, and I get error messages that seems to contradict the docs. One such message:

package.json “main” property is required when generating a distribution and must be set to:

even though the docs say main should be set to something else.

Let me 10 minutes, I did it today but I’ve to do some adjustments…

1 Like

I could pack/publish with the “new” way but can’t include it in a project. I clear that up and comes with the solution (I’m trying this new way https://github.com/ionic-team/stencil/issues/502)

It’s working…let me 5 to document

Looks as though there’s a tool missing: npm run build-for-npm. I’ve used ng-packagr to publish Angular components. Maybe when Stencil stabilizes I’ll throw together “stencil-packagr.”

I’ll try to follow what you’ve written as soon as you post it, thank you (and thank you to @dkundel).

I use to think as you do because I was trying to publish my StencilJS library/component from “inside” the dist folder, as I would do with an Angular/ng-packagr module. To do so, I was copying and editing manually package.json because I was facing the same issue as you did. But like @dkundel described, it’s possible to pack (and I guess publish) a StencilJS component from the root folder.


git clone https://github.com/ionic-team/stencil-component-starter my-component
cd my-component
git remote rm origin
npm install
npm run build
npm pack 

If you would like to add a README and LICENSE to the component, you could then edit package.json attribute files and add it there

"files": [
    "dist/", "readme.md", "LICENSE"

P.S.: I gonna edit my solution to import the component in a Ionic project within the next minutes and link it here


I just published my component again to npm, this works too with npm publish

What if the component has peer dependencies? Does that information end up in the tarball after npm pack?

I don’t have other dependencies in my component so I could not tell, but if I understand correctly, the package.json of the root of my component end up 1 to 1 (exactly the same) in my tarball

For the record, that’s the post where I try to describe how to import a Stencil component in an Ionic project