stencil-component-starter: Build broken - example component not rendering in Chrome, Firefox, IE11 neither on Windows 7, Windows 10 nor on Ubuntu 17.10.1 - only on Mac

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @stencil/core@0.7.7

I’m submitting a … (check one with “x”) [X ] bug report

Current behavior: After fresh install starting the dev server the example component does not render. No errors in the console whatsoever, just IE11 DOM Explorer shows this message (which cannot be c&p’ed): IE11 DOM Explorer message

Expected behavior: Expecting the example component to render.

Steps to reproduce:

git clone https://github.com/ionic-team/stencil-starter.git test
cd test
git remote rm origin
npm install
npm run build --prod
npm run serve

Related code: This is the source generated by npm run build --prod (unsure if this is helpful):

<!DOCTYPE html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <script data-resources-url="/build/mycomponent/">/*! Built with http://stenciljs.com */
!function(e,t,n,r,o,i,s,c,u,l,m,d){for((e.mycomponent=e.mycomponent||{}).components=u,e.customElements||(e.$whenDefined=[],e.customElements={whenDefined:function(t){return{then:function(n){e.$whenDefined.push([t,n])}}}}),(m=u.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((l=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",l.setAttribute("data-styles",""),t.head.insertBefore(l,t.head.firstChild)),l=(m=t.querySelectorAll("script")).length-1;l>=0&&!(d=m[l]).src&&!d.hasAttribute("data-resources-url");l--);(m=d.getAttribute("data-resources-url"))&&(o=m),!o&&d.src&&(o=(m=d.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"mycomponent/"),l=t.createElement("script"),function(e,t,n,r){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in n)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,l)?l.src=o+"mycomponent.jpysghnx.js":(l.src=o+"mycomponent.jvyrrdlw.js",l.setAttribute("type","module"),l.setAttribute("crossorigin",!0)),l.setAttribute("data-resources-url",o),l.setAttribute("data-namespace","mycomponent"),t.head.appendChild(l)}(window,document,0,0,0,0,0,0,[],void 0);</script> </head>
<body> <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component> <script>"serviceWorker"in navigator&&"file:"!==location.protocol&&window.addEventListener("load",function(){navigator.serviceWorker.register("/sw.js").then(function(e){console.log("service worker registered",e),e.onupdatefound=function(){var n=e.installing;n.onstatechange=function(){"installed"===n.state&&window.dispatchEvent(new Event("swUpdate"))}}}).catch(function(e){console.log("service worker error",e)})});</script> <script type="text/javascript" src="http://localhost:35729/livereload.js?snipver=1" charset="utf-8"></script>
        </body></html>

Other information: Chrome console shows this: Chrome with npm run serve

All browsers mentioned are installed with their latest stable version.

node v8.11.1 npm 5.6.0

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 24 (22 by maintainers)

Most upvoted comments

I encounter the same problem on :

stencil/core v0.9.1 and @stencil/core v0.9.7
Node v10.2.1
npm 5.6.0
Mac 10.11.6
Chrome 67, Firefox, Safari (didn’t test on edge)

I’m not sure if it’s normal but in www/build/mycomponent/mycomponent.core.js App.components is empty so defineComponent(cmpMeta, HostElementConstructor)is never called.

stencil-app-starteris not working either

EDIT For me, the problem was caused by my project being located under a test folder. The components was being ignored by the default excludeSrc configuration which compare [ '**/test/**', '**/*.spec.*' ] to absolute file path.

karlito40 on Jun 15, 2018