DotVVM apps on CloudFlare: Issues with Rocket Loader

Are you running your DotVVM application through CloudFlare? Have your DotVVM page stopped working suddenly with the "A Parser-blocking, cross-origin script is invoked via document.write" error message before? Here is the insight to the problem.

TLDR: Turn off the Rocket Loader in the "Speed" section in the CloudFlare admin site.

CloudFlare is a service providing content delivery network (CDN) and occasionally they like to call themselves the "next generation CDN". CloudFlare uses many content optimization features among which there is also a Rocket Loader. Rocket Loader is a general-purpose asynchronous JavaScript loader coupled with a lightweight virtual browser which can safely run any JavaScript code after window.onload.

What is the problem and how it works?

When the traffic goes through the CloudFlare proxy, a Rocket Loader script is injected in the page.

Rocket Loader fetches all the scripts asynchronously so the page content is not blocked while waiting for each script to be downloaded. Additionally, the scripts are bundled together, so there is only a single HTTP request. And finally, the screipts are persisted in a local storage so they don’t have to be downloaded at all next time.

You can find more details about what Rocket Loader exactly does in a StackExchange post.

The Rocket Loader is currently in beta and we have noticed issues on some DotVVM pages. The DotVVM initialization script was executed before Knockout JS and Dotvvm.js libraries were loaded.

Solution

Right now, you can turn off the RocketLoader in the "Speed" section in the CloudFlare admin of your site. We will be making changes in the framework so the Rocket Loader won’t break us in the future.