Stencil: Generated files appearing at project root instead of the dist folder

[dustinwtf]

Stencil version:

@stencil/[email protected]

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
When running npm run build or npm start, the build process will spit out a couple of *randomID*.sc.js files into my project root.

Expected behavior:
All of the files go neatly into my configured dist folder.

Steps to reproduce:
Simply run npm run build or yarn run build from your project root. I have only tried this from the component starter pack.

Related code:
n/a

Other information:
The same files also end up in the right place, so I don't think anything is truly breaking, but it is interesting how these slip into the project root as a duplicate.

[jgw96]

@dustinwtf This is happening in the stencil-app-starter?

[dustinwtf]

@jgw96 I just checked and it didn't happen. I have seen it happen before, but maybe something got fixed since then?

[dustinwtf]

Another note: This doesn't happen on 0.0.7

[cary-smith]

I have run into this with the stencil-component-starter as well.

[cary-smith]

Just switched to 0.0.8-5 on the stencil-component-starter. The files are no longer randomly named, but I do get a component-name.sc.js for each component group in my library.

[dustinwtf]

It's randomly named if I run npm run build but the component's name if I run npm run start

[mattdsteele]

This appears to be a more significant issue. It causes components to not load at all in polyfilled/ES5 environments.

To reproduce:

• Clone stencil-component-starter (this gets me @stencil/[email protected] currently)
• Create a distribution with npm run build. This will generate the [id].sc.js files at the root of the project, as @dustinwtf reports
• Host the files somewhere (unpkg is fine) and load the entry file (e.g. dist/mycomponents.js) onto a page via a script
• In Firefox and Edge, it will attempt to load dist/mycomponents/[id].sc.js and 404. As such, the component never loads and is unusable.
• In Chrome, it loads dist/mycomponents/[id].js, so it's unaffected. I'm assuming Safari is the same.

If I move the generated [id].sc.js files into the dist/mycomponents/ folder manually (so they sit alongside [id].js), the components load fine.

I can create a specific repo and test case if you'd like, just let me know. Thanks!

[mattdsteele]

My workaround is to run a Node script after npm run start that moves those files to the appropriate location:

// See https://github.com/ionic-team/stencil/issues/321

const globby = require('globby');
const fs = require('fs');
const componentFolder = 'mycomponents';

globby('*.sc.js').then(results => {
    results.forEach(file => {
        fs.renameSync(file, `dist/${componentFolder}/${file}`);
    });
});

[rolandjitsu]

I think this is no longer the case. With the latest release (v0.0.9-0) seems like all is fine.

[mattdsteele]

Yup, 0.0.9 seems good. I think this can be closed, thanks!

[dustinwtf]

Same here! Thanks, everyone!