Stencil: Npm pack/publish complaining about missing package.json in dist folder

[peterpeterparker]

Stencil version:
0.2.3

I'm submitting a:

• [X] feature request

Current behavior:

I have cloned the https://github.com/ionic-team/stencil-component-starter and would like to publish it thru npm.

Right now, I run npm pack in the dist folder after having built it while doing npm run build in order to create a local library which I could then import in any local project doing a npm install /path/to/project/dist/project.0.0.1.tgz

Unfortunately this doesn't work because npm is complaining about the fact that the dist folder doesn't contains any package.json file

Expected behavior:

This is basically the same flow as building a library with an Angular and packagr, which would populate a package.json file in the distribution dir

Furthermore, I kind of have the feeling that the dist folder should also contains copy of files like README.md (this isn't the case right now)

Steps to reproduce:

git clone https://github.com/ionic-team/stencil-component-starter whatever
cd whatever
npm install
npm run build
cd dist
npm pack

Workaround:

What I do now, after having run npm run build is

1. cp package.json dist/
2. then manually I edit this copy of package.json in order to
   a. Replace all dist/ references
   b. Remove the node "files"

Also, I don't do it, but I noticed that resulting package.json created with Angular library are inlined

Other information:

Of course, if I'm totally wrong, no worries, would really appreciate a feedback on this feature request and specially some guidance then to explain me how I could pack/publish a Stencil component thru npm without error

Update

I could confirm that this error also happens when I try to publish the library to npm (npm publish). Here the stacktrace of the error

$ npm publish

npm ERR! path package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2018-02-08T07_47_19_027Z-debug.log

Update 2

Also it would be definitely good to, I think, that the README.md file would also be copied in the dist folder while doing npm run build. I just add to do it manually and publish a new version of my component to npmjs because I did forget to manually copy this file before publishing the first version.

[dkundel]

Hey @peterpeterparker,

This is a problem with the way you are installing / packing up the application. The dist folder is in this case not intended to contain all files but only the output of the compiler. That's why it doesn't contain a package.json or a README.md. In fact if you look into the package.json you'll see the files: ['dist/'] entry which tells npm that when it bundles which files aside of the package.json should be part of it.

If you want to package the README.md into your package you simply have to add it there: files: ['dist/', 'README.md']. The files entry is the equivalent of an .npminclude file.

As for the packaging, you want to run npm pack directly in your project root. You technically don't have to do that either as you should be able to do the following if you only want to locally install it:

npm install /path/to/your/project

This should do all the required steps automatically. Alternatively if you want this purely for development purposes, you can look into using npm link as this will work with symlinks instead.

I hope this helps.

[peterpeterparker]

thx @dkundel it works like a charm.

doing so I only had one change to do in order to include correctly the component in my Ionic project.

before this doing the pack/publish from root, I included my component in app.modules.ts of my Ionic app like following:

import import 'my-component/my-component';

After doing the pack/publish from root, the import should be done like following:

import 'my-component/dist/my-component';

Also of course, then the script, like in my case copy.config.js should also be modified to reflect the dist change

Thx a lot, awesome!

[mburger81]

@peterpeterparker Hi, I'm trying to do the same. Did you resolve the behavior with npm pack?

[peterpeterparker]

@mburger81 yes. I run npm pack from the root folder

 npm run build
 npm pack

here an example of project where I do that: https://github.com/peterpeterparker/web-social-share

[mburger81]

@peterpeterparker ok I had a look to your example, so we hat do run the npm pack from root and not from dist folder as we do for angular libs.
It seems at the end we have to do the import like this?
import '@scope/my-component/dist';
In this case we get no error but on the other side the component seems to not be loaded?

[peterpeterparker]

@mburger81 maybe this is related to the Stencil version? Right now I use v0.8.2

[mburger81]

Ok I saw your "Installation in a Ionic project", it seems this is a problem with ionic-app-scripts (as usual), so for ionic3 we have to got with this workaround, using ionic4 probably anything would work out of the box?

[peterpeterparker]

@mburger81 I guess yes it will be better with Ionic4. With Ionic3 you still have to do tricks like I described in my readme yes.

But note, right now, if you build your library with Stencil >= v0.9.0 it might probably not works anyway in your Ionic app, see my open issue https://github.com/ionic-team/stencil/issues/873 therefore, stick to v0.8.2

[mburger81]

@peterpeterparker I asked it in the stencil slack channel where I also referenced your workaround and your opened issue. Perhaps you can jump the threat there or I'll give you some news if I have some. thx