Stencil: Error when building Stencil app that uses Stencil lib using @ionic/core (dev server works)

Created on 3 Sep 2018  路  8Comments  路  Source: ionic-team/stencil

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://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
@case-os/ui uses @case-os/ui-kit which uses @ionic/core. npm run dev works fine, npm run build fails with:

[18:30.4]  prerender, started: / ...
[18:31.2]  prerender, finished: / in 816 ms
[18:31.2]  prerendering failed in 822 ms

[ ERROR ]  TypeError: Parameter "url" must be a string, not
           undefined at Url.parse (url.js:103:11) at
           Object.urlParse [as parse] (url.js:97:13) at
           getWritePathFromUrl
           (/Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:7708:38)
           at
           /Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:13945:26
           at Generator.next (<anonymous>) at
           /Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:13815:71
           at new Promise (<anonymous>) at __awaiter$E
           (/Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:13811:12)
           at writePrerenderDest
           (/Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:13943:12)
           at
           /Users/matthias/Documents/Projekte/bitflower/Case
           OS/Prototype/v0.2/caseos-ui/node_modules/@stencil/core/dist/compiler/index.js:13929:19

[ ERROR ]  evalmachine.<anonymous>:6
           (function(resourcesUrl){var
           IONIC_PREFIX="ionic:",IONIC_SESSION_KEY="ionic-persist-config";function
           configFromSession(){try{var
           t=window.sessionStorage.getItem(IONIC_SESSION_KEY);return
           t?JSON.parse(t):{}}catch(t){return{}}}function
           saveConfig(t){try{window.sessionStorage.setItem(IONIC_SESSION_KEY,JSON.stringify(t))}catch(t){return}}function
           configFromURL(){var t={};return
           window.location.search.slice(1).split("&").map(function(t){return
           t.split("=")}).map(function(t){var
           n=t[0],e=t[1];return[decodeURIComponent(n),decodeURIComponent(e)]}).filter(function(t){return
           startsWith(t[0],IONIC_PREFIX)}).map(function(t){var
           n=t[0],e=t[1];return[n.slice(IONIC_PREFIX.length),e]}).forEach(function(n){var
           e=n[0],i=n[1];t[e]=i}),t}function
           startsWith(t,n){return
           t.substr(0,n.length)===n}var
           PLATFORMS_MAP={ipad:isIpad,iphone:isIphone,ios:isIOS,android:isAndroid,phablet:isPhablet,tablet:isTablet,cordova:isCordova,capacitor:isCapacitorNative,electron:isElectron,pwa:isPWA,mobile:isMobile,desktop:isD
           TypeError: t.matchMedia is not a function at
           Object.isPWA [as pwa]
           (evalmachine.<anonymous>:6:2339) at
           evalmachine.<anonymous>:6:1456 at Array.filter
           (<anonymous>) at detectPlatforms
           (evalmachine.<anonymous>:6:1414) at
           setupPlatforms (evalmachine.<anonymous>:6:1234)
           at evalmachine.<anonymous>:6:3063 at
           evalmachine.<anonymous>:7:3 at
           evalmachine.<anonymous>:12:3

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bitflower/[email protected] build: `stencil build --prerender --prod && npm run co-deploy`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @bitflower/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/matthias/.npm/_logs/2018-09-03T19_18_31_345Z-debug.log

Steps to reproduce:
Clone this repo and npm run build:
https://github.com/bitflower/caseos-ui
https://github.com/bitflower/caseos-ui-kit

Added @jthoms1 and @adamdbradley as collaborators.

Thanks, Stencil stays awesome! And I know this might not be the usual use case. Let me know how I can help!

prerender
Source
picture bitflower
👍1

Most helpful comment

Hello, any news on this? stencil build --prerender still does not work right?

Thank you!

picture x1c0 on 31 Jan 2019
👍2 👀1

All 8 comments

Works without --prerender:
"build": "stencil build --prod", instead of
"build": "stencil build --prerender --prod",

bitflower picture bitflower on 3 Sep 2018

I have done a little debugging inside the index.js of the compiler.

I think what is being returned from prerender.stenciljs.com (?) is faulty:

bitflower, prerenderPath, 3 { url: 'http://prerender.stenciljs.com/',
  isPrerender: true,
  timestamp: '2018-08-05T19:31:36',
  html: '<!DOCTYPE html>\n<html dir="ltr" lang="en">\n\n<head>\n  <meta charset="utf-8" />\n  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, viewport-fit=cover"\n  />\n  <meta name="apple-mobile-web-app-capable" content="yes" />\n  <meta name="apple-mobile-web-app-status-bar-style" content="black">\n  <meta name="apple-mobile-web-app-title" content="AppTitle">\n  <meta name="application-name" content="Case OS" />\n  <meta http-equiv="x-ua-compatible" content="IE=Edge" />\n  <meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">\n  <meta name="theme-color" content="#42bc98">\n  <meta name="description" content="Case OS" />\n  <title>Case OS</title>\n  <script src="/build/app.js"></script>\n  <link rel="manifest" href="/manifest.json" />\n\n  <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon/apple-icon-57x57.png">\n  <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon/apple-icon-60x60.png">\n  <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon/apple-icon-72x72.png">\n  <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-icon-76x76.png">\n  <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon/apple-icon-114x114.png">\n  <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-icon-120x120.png">\n  <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon/apple-icon-144x144.png">\n  <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-icon-152x152.png">\n  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-icon-180x180.png">\n  <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-icon-192x192.png">\n  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">\n  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">\n  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">\n  <meta name="msapplication-TileColor" content="#ffffff">\n  <meta name="msapplication-TileImage" content="/assets/favicon/ms-icon-144x144.png">\n\n  <!-- <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">\n  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">\n  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"> -->\n  <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#42bc98">\n  <link rel="shortcut icon" href="/assets/favicon/favicon.ico">\n</head>\n\n<body>\n  <noscript>You must enable Javascript to run CaseOS</noscript>\n  <co-app>\n    <app-load></app-load>\n  </co-app>\n  <ion-menu-controller />\n<script data-build="2018-08-05T19:31:36">\n    if (\'serviceWorker\' in navigator && location.protocol !== \'file:\') {\n      window.addEventListener(\'load\', function() {\n        navigator.serviceWorker.register(\'/sw.js\')\n          .then(function(reg) {\n            reg.onupdatefound = function() {\n              var installingWorker = reg.installing;\n              installingWorker.onstatechange = function() {\n                if (installingWorker.state === \'installed\') {\n                  window.dispatchEvent(new Event(\'swUpdate\'))\n                }\n              }\n            }\n          })\n          .catch(function(err) { console.error(\'service worker error\', err) });\n      });\n    }\n</script>\n</body>\n\n</html>' }
bitflower, prerenderPath, 4 { url: undefined,
  diagnostics: 
   [ { level: 'error',
       type: 'build',
       header: 'Build Error',
       messageText: 'evalmachine.<anonymous>:10\n(function(resourcesUrl){var IONIC_PREFIX="ionic:",IONIC_SESSION_KEY="ionic-persist-config";function configFromSession(){try{var t=window.sessionStorage.getItem(IONIC_SESSION_KEY);return t?JSON.parse(t):{}}catch(t){return{}}}function saveConfig(t){try{window.sessionStorage.setItem(IONIC_SESSION_KEY,JSON.stringify(t))}catch(t){return}}function configFromURL(){var t={};return window.location.search.slice(1).split("&").map(function(t){return t.split("=")}).map(function(t){var n=t[0],e=t[1];return[decodeURIComponent(n),decodeURIComponent(e)]}).filter(function(t){return startsWith(t[0],IONIC_PREFIX)}).map(function(t){var n=t[0],e=t[1];return[n.slice(IONIC_PREFIX.length),e]}).forEach(function(n){var e=n[0],i=n[1];t[e]=i}),t}function startsWith(t,n){return t.substr(0,n.length)===n}var PLATFORMS_MAP={ipad:isIpad,iphone:isIphone,ios:isIOS,android:isAndroid,phablet:isPhablet,tablet:isTablet,cordova:isCordova,capacitor:isCapacitorNative,electron:isElectron,pwa:isPWA,mobile:isMobile,desktop:is\n\nTypeError: t.matchMedia is not a function\n    at Object.isPWA [as pwa] (evalmachine.<anonymous>:10:2339)\n    at evalmachine.<anonymous>:10:1456\n    at Array.filter (<anonymous>)\n    at detectPlatforms (evalmachine.<anonymous>:10:1414)\n    at setupPlatforms (evalmachine.<anonymous>:10:1234)\n    at evalmachine.<anonymous>:10:3063\n    at evalmachine.<anonymous>:11:3\n    at evalmachine.<anonymous>:12:3\n    at ContextifyScript.Script.runInContext (vm.js:59:29)\n    at Object.runInContext (vm.js:120:6)',
       relFilePath: null,
       absFilePath: null,
       lines: [] } ],
  html: '<!DOCTYPE html>\n<html dir="ltr" lang="en">\n\n<head>\n  <meta charset="utf-8" />\n  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, viewport-fit=cover"\n  />\n  <meta name="apple-mobile-web-app-capable" content="yes" />\n  <meta name="apple-mobile-web-app-status-bar-style" content="black">\n  <meta name="apple-mobile-web-app-title" content="AppTitle">\n  <meta name="application-name" content="Case OS" />\n  <meta http-equiv="x-ua-compatible" content="IE=Edge" />\n  <meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">\n  <meta name="theme-color" content="#42bc98">\n  <meta name="description" content="Case OS" />\n  <title>Case OS</title>\n  <script src="/build/app.js"></script>\n  <link rel="manifest" href="/manifest.json" />\n\n  <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon/apple-icon-57x57.png">\n  <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon/apple-icon-60x60.png">\n  <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon/apple-icon-72x72.png">\n  <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-icon-76x76.png">\n  <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon/apple-icon-114x114.png">\n  <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-icon-120x120.png">\n  <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon/apple-icon-144x144.png">\n  <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-icon-152x152.png">\n  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-icon-180x180.png">\n  <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-icon-192x192.png">\n  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">\n  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">\n  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">\n  <meta name="msapplication-TileColor" content="#ffffff">\n  <meta name="msapplication-TileImage" content="/assets/favicon/ms-icon-144x144.png">\n\n  <!-- <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">\n  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">\n  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"> -->\n  <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#42bc98">\n  <link rel="shortcut icon" href="/assets/favicon/favicon.ico">\n</head>\n\n<body>\n  <noscript>You must enable Javascript to run CaseOS</noscript>\n  <co-app>\n    <app-load></app-load>\n  </co-app>\n  <ion-menu-controller />\n<script data-build="2018-08-05T19:31:36">\n    if (\'serviceWorker\' in navigator && location.protocol !== \'file:\') {\n      window.addEventListener(\'load\', function() {\n        navigator.serviceWorker.register(\'/sw.js\')\n          .then(function(reg) {\n            reg.onupdatefound = function() {\n              var installingWorker = reg.installing;\n              installingWorker.onstatechange = function() {\n                if (installingWorker.state === \'installed\') {\n                  window.dispatchEvent(new Event(\'swUpdate\'))\n                }\n              }\n            }\n          })\n          .catch(function(err) { console.error(\'service worker error\', err) });\n      });\n    }\n</script>\n</body>\n\n</html>',
  styles: null,
  anchors: [],
  components: [],
  styleUrls: [],
  scriptUrls: [],
  imgUrls: [] }
bitflower, prerenderPath, 6
[31:44.3]  prerender, finished: / in 423 ms

The diagnostics say level: error and header: Build error. Its messageText is what we see in the terminal where the stencil build is running:

evalmachine.<anonymous>:10\n(function(resourcesUrl){var IONIC_PREFIX="ionic:",IONIC_SESSION_KEY="ionic-persist-config";function configFromSession(){try{var t=window.sessionStorage.getItem(IONIC_SESSION_KEY);return t?JSON.parse(t):{}}catch(t){return{}}}function saveConfig(t){try{window.sessionStorage.setItem(IONIC_SESSION_KEY,JSON.stringify(t))}catch(t){return}}function configFromURL(){var t={};return window.location.search.slice(1).split("&").map(function(t){return t.split("=")}).map(function(t){var n=t[0],e=t[1];return[decodeURIComponent(n),decodeURIComponent(e)]}).filter(function(t){return startsWith(t[0],IONIC_PREFIX)}).map(function(t){var n=t[0],e=t[1];return[n.slice(IONIC_PREFIX.length),e]}).forEach(function(n){var e=n[0],i=n[1];t[e]=i}),t}function startsWith(t,n){return t.substr(0,n.length)===n}var PLATFORMS_MAP={ipad:isIpad,iphone:isIphone,ios:isIOS,android:isAndroid,phablet:isPhablet,tablet:isTablet,cordova:isCordova,capacitor:isCapacitorNative,electron:isElectron,pwa:isPWA,mobile:isMobile,desktop:is\n\nTypeError: t.matchMedia is not a function\n    at Object.isPWA [as pwa] (evalmachine.<anonymous>:10:2339)\n    at evalmachine.<anonymous>:10:1456\n    at Array.filter (<anonymous>)\n    at detectPlatforms (evalmachine.<anonymous>:10:1414)\n    at setupPlatforms (evalmachine.<anonymous>:10:1234)\n    at evalmachine.<anonymous>:10:3063\n    at evalmachine.<anonymous>:11:3\n    at evalmachine.<anonymous>:12:3\n    at ContextifyScript.Script.runInContext (vm.js:59:29)\n    at Object.runInContext (vm.js:120:6)

So is it the case that the error is happening on the prerender server?

bitflower picture bitflower on 5 Sep 2018

This is a prerender that I have been working on fixing the last few days. I believe we will be releasing prerendering with puppeteer very soon and this will be fixed. Thanks!

jthoms1 picture jthoms1 on 6 Sep 2018

Thanks @jthoms1 for the feedback. I'm on Slack if you need me - as usual ;-)

bitflower picture bitflower on 7 Sep 2018
👍1

Still happens in 0.13.0-8. I guess you know :-)

bitflower picture bitflower on 12 Sep 2018

Yep, still in progress.

jthoms1 picture jthoms1 on 13 Sep 2018
👍2

Hello, any news on this? stencil build --prerender still does not work right?

Thank you!

x1c0 picture x1c0 on 31 Jan 2019
👍2 👀1

Should be fixed in most recent versions

adamdbradley picture adamdbradley on 1 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ckrack picture ckrack  路  3Comments
anthonylebrun picture anthonylebrun  路  3Comments
rajiramamoorthi picture rajiramamoorthi  路  3Comments
bekliev picture bekliev  路  3Comments
noahlaux picture noahlaux  路  3Comments