Hi,
I am trying a sample Stencil application on a local network. Both bundling and deployment of the assets are alright but, when trying it in the browser, it does not work.
It does resolve the first chunk, the module declared as script tag in the index.html but, fails at loading the following ones, those import in the JS code. The network server returns 500 Internal Server Error.
Stencil uses Rollup under the hood which depends on ES modules (ESM).
Am I missing something in my configuration or do I hit a current limitation of the network?
Does anyone succeed to deploy a Rollup based app on the network and can share a sample?
To reproduce the issue, here a sample repo:
git clone https://github.com/peterpeterparker/stencil-ic-sample
cd stencil-ic-sample
npm ci
dfx start --background
dfx deploy
Thx in advance for any tips
P.S.: Screenshot of the error
There is no issue with ES modules.
Thanks to the create-ic-app of @Tbd I was able to compare a working sample app with mine and figured out each modules deployed on the Internet Computer needs to be explicitly preloaded.
Per default, StencilJS will “only” preload the critical path (see doc and repo).
Therefore, at least for test purpose, I created a postbuild script which add <link rel="modulepreload" href="/build/xxxx.js" /> entries for every chunks in the index.html and was able to load / run the application in the browser.
3 Likes
Also worth to notice: according the tests I ran on the local simulated network, placing the modulepreload links at the bottom of the DOM and not at the top, speeds up the boot time.
With my Stencil sample app, I went down from 5s to 0.2s.
It might not be an issue with React or Vue, don’t know, and I did not test yet on the Internet Computer. Nevertheless, it was a cool finding.
(screenshots 
https://twitter.com/daviddalbusco/status/1414626842686988289)
1 Like
UPDATE: It looks like this workaround is only needed for the local simulated network.
In prod on the IC it seems to be ignored and / or not needed.
