Error: Evaluation failed: Error: blob:http://localhost:45678/f778a6eb-f084-4f21-9495-c03388a074a5 not in stylesheetAstObjects!

[stereobooster]

Your project is very helpful. My current pages prerendered with react-snap start to render at 0.5 seconds and have about 80% of content painted. But main js bundle is 200+kb (because I use react-mapbox-gl, which is pretty heavy). So I decided to use dynamic imports and react-loadable. But now I get this error.

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: Evaluation failed: Error: blob:http://localhost:45678/f778a6eb-f084-4f21-9495-c03388a074a5 not in stylesheetAstObjects!
    at links.filter.forEach.stylesheet (<anonymous>:125:19)
    at Array.forEach (<anonymous>)
    at stylesheetAstObjects (<anonymous>:123:10)
    at <anonymous>:159:7
    at Frame._rawEvaluate (/Users/slavik/my/map-react/node_modules/minimalcss/node_modules/puppeteer/lib/FrameManager.js:250:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
error Command failed with exit code 1.

UPD: this happens because of webworkify, which is used by mapbox-gl.

var blob = new Blob(['alert(1)'], { type: 'text/javascript' });
URL.createObjectURL(blob);
"blob:https://github.com/47b9e2f7-f81f-49a0-a14b-5a1302976986"

this is how to read those files

fetch("blob:http://127.0.0.1:8080/7047145b-2f81-4b95-901b-66e4dca073ae").then( async (x) => console.log(await x.text()) )

[peterbe]

I'm not familiar with this webworkify thing. Also, I don't see how it connects to react-loadable.

Anyway, is this a trick to load more JavaScript later? Or if I understand (unlikely) what react-loadable is, it's a wrapper for the webpack tricks that can load more JS later (and in the case of react-loadable, it's done based on certain components being needed).

Either way. The goal has to be for minimalcss to stay away from how loading works as much as possible and simply wait till the network is idle and then focus on downloaded CSS and the DOM.

How can I reproduce this without too fancy a setup? Can this blob:... stuff be reduced to something super simple I can put into a test html file.

[stereobooster]

How can I reproduce this without too fancy a setup?

I suppose this will do:

var blob = new Blob(['p{color:#000}'], { type: 'text/stylesheet' });
var url = URL.createObjectURL(blob);
var linkTag = document.createElement("link");
linkTag.setAttribute("rel", "stylesheet");
linkTag.setAttribute("href", url);
document.body.appendChild(linkTag);

[peterbe]

And running fetch, will that require a network call or will the browser immediately resolve?

[stereobooster]

Browser will resolve it without network