Using react-snap to prerender blazor on cloudflare pages

Hi, I’ve used npx-snap to statically prerender blazor applications on github pages in the past, following this tutorial: Pre-render Blazor WebAssembly at build time to optimize for search engines

I’ve been unable to make this work with cloudflare pages. I’ve set up a build.sh files as follows:

#!/bin/sh
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh -c 6.0 -InstallDir ./dotnet6
./dotnet6/dotnet --version
./dotnet6/dotnet publish -c Release -o output

npx react-snap

The resulting log is as follows

22:02:23.991	Initializing build environment. This may take up to a few minutes to complete
22:06:31.366	Success: Finished initializing build environment
22:06:31.366	Cloning repository...
22:06:34.357	Success: Finished cloning repository files
22:06:35.504	Installing dependencies
22:06:35.508	Python version set to 2.7
22:06:36.312	v12.18.0 is already installed.
22:06:36.763	Now using node v12.18.0 (npm v6.14.4)
22:06:36.801	Started restoring cached build plugins
22:06:36.805	Finished restoring cached build plugins
22:06:36.932	Attempting ruby version 2.7.1, read from environment
22:06:37.977	Using ruby version 2.7.1
22:06:38.236	Using PHP version 5.6
22:06:38.264	5.2 is already installed.
22:06:38.270	Using Swift version 5.2
22:06:38.270	Started restoring cached node modules
22:06:38.274	Finished restoring cached node modules
22:06:38.446	Installing NPM modules using NPM version 6.14.4
22:06:39.206	npm notice created a lockfile as package-lock.json. You should commit this file.
22:06:39.208	npm WARN repo No description
22:06:39.208	npm WARN repo No repository field.
22:06:39.208	npm WARN repo No license field.
22:06:39.209	
22:06:39.349	up to date in 0.249s
22:06:39.350	found 0 vulnerabilities
22:06:39.350	
22:06:39.359	NPM modules installed
22:06:39.605	Installing Hugo 0.54.0
22:06:40.208	Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
22:06:40.211	Started restoring cached go cache
22:06:40.214	Finished restoring cached go cache
22:06:40.242	go version go1.14.4 linux/amd64
22:06:40.247	go version go1.14.4 linux/amd64
22:06:40.248	Installing missing commands
22:06:40.248	Verify run directory
22:06:40.248	Executing user command: chmod +x build.sh && ./build.sh 
22:06:40.431	dotnet-install: Note that the intended use of this script is for Continuous Integration (CI) scenarios, where:
22:06:40.431	dotnet-install: - The SDK needs to be installed without user interaction and without admin rights.
22:06:40.431	dotnet-install: - The SDK installation doesn't need to persist across multiple CI runs.
22:06:40.432	dotnet-install: To set up a development environment or to run apps, use installers rather than this script. Visit https://dotnet.microsoft.com/download to get the installer.
22:06:40.432	
22:06:41.248	dotnet-install: Downloading primary link https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100/dotnet-sdk-6.0.100-linux-x64.tar.gz
22:06:42.552	dotnet-install: Extracting zip from https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100/dotnet-sdk-6.0.100-linux-x64.tar.gz
22:06:48.500	dotnet-install: Adding to current process PATH: `/opt/buildhome/repo/dotnet6`. Note: This change will be visible only when sourcing script.
22:06:48.500	dotnet-install: Note that the script does not resolve dependencies during installation.
22:06:48.500	dotnet-install: To check the list of dependencies, go to https://docs.microsoft.com/dotnet/core/install, select your operating system and check the "Dependencies" section.
22:06:48.500	dotnet-install: Installation finished successfully.
22:06:48.648	6.0.100
22:06:48.773	
22:06:48.775	Welcome to .NET 6.0!
22:06:48.775	---------------------
22:06:48.775	SDK Version: 6.0.100
22:06:48.775	
22:06:48.775	Telemetry
22:06:48.775	---------
22:06:48.775	The .NET tools collect usage data in order to help us improve your experience. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.
22:06:48.775	
22:06:48.775	Read more about .NET CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry
22:06:48.775	
22:06:48.775	----------------
22:06:48.775	Installed an ASP.NET Core HTTPS development certificate.
22:06:48.775	To trust the certificate run 'dotnet dev-certs https --trust' (Windows and macOS only).
22:06:48.775	Learn about HTTPS: https://aka.ms/dotnet-https
22:06:48.775	----------------
22:06:48.775	Write your first app: https://aka.ms/dotnet-hello-world
22:06:48.775	Find out what's new: https://aka.ms/dotnet-whats-new
22:06:48.775	Explore documentation: https://aka.ms/dotnet-docs
22:06:48.775	Report issues and find source on GitHub: https://github.com/dotnet/core
22:06:48.775	Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli
22:06:48.775	--------------------------------------------------------------------------------------
22:06:49.055	Microsoft (R) Build Engine version 17.0.0+c9eb9dd64 for .NET
22:06:49.055	Copyright (C) Microsoft Corporation. All rights reserved.
22:06:49.055	
22:06:49.997	  Determining projects to restore...
22:06:52.856	  Restored /opt/buildhome/repo/CloudflarePagesTest/CloudflarePagesTest.csproj (in 2.6 sec).
22:06:58.597	  CloudflarePagesTest -> /opt/buildhome/repo/CloudflarePagesTest/bin/Release/net6.0/CloudflarePagesTest.dll
22:06:58.599	  CloudflarePagesTest (Blazor output) -> /opt/buildhome/repo/CloudflarePagesTest/bin/Release/net6.0/wwwroot
22:07:05.786	  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
22:07:05.845	  Compressing Blazor WebAssembly publish artifacts. This may take a while...
22:07:34.772	  CloudflarePagesTest -> /opt/buildhome/repo/output/
22:07:43.776	
22:07:49.429	🔥  pageerror at /: SyntaxError: Unexpected token '?'
22:07:49.429	
22:07:49.887	️️️💬  console.log at /: Streaming compilation failed. Falling back to ArrayBuffer instantiation.  [email protected]
22:07:50.738	️️️💬  console.log at /: mono_wasm_runtime_ready fe00e07a-5519-4dfe-b35a-f867dbaf2e28
22:07:52.412	️️️💬  console.log at /: crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
22:07:52.412	      Unhandled exception rendering component: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
22:07:52.412	      Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
22:07:52.412	          at http://localhost:45678/_framework/blazor.webassembly.js:1:328
22:07:52.412	          at Array.forEach (<anonymous>)
22:07:52.412	          at a.findFunction (http://localhost:45678/_framework/blazor.webassembly.js:1:296)
22:07:52.412	          at _ (http://localhost:45678/_framework/blazor.webassembly.js:1:2437)
22:07:52.412	          at http://localhost:45678/_framework/blazor.webassembly.js:1:3325
22:07:52.412	          at new Promise (<anonymous>)
22:07:52.412	          at Object.beginInvokeJSFromDotNet (http://localhost:45678/_framework/blazor.webassembly.js:1:3306)
22:07:52.412	          at Object.Rt [as invokeJSFromDotNet] (http://localhost:45678/_framework/blazor.webassembly.js:1:59738)
22:07:52.412	          at _mono_wasm_invoke_js_blazor (http://localhost:45678/_framework/dotnet.6.0.0.okun7sem7f.js:1:193780)
22:07:52.412	          at wasm-function[2588]:0x8065b
22:07:52.412	Microsoft.JSInterop.JSException: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
22:07:52.412	Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
22:07:52.412	    at http://localhost:45678/_framework/blazor.webassembly.js:1:328
22:07:52.412	    at Array.forEach (<anonymous>)
22:07:52.412	    at a.findFunction (http://localhost:45678/_framework/blazor.webassembly.js:1:296)
22:07:52.412	    at _ (http://localhost:45678/_framework/blazor.webassembly.js:1:2437)
22:07:52.412	    at http://localhost:45678/_framework/blazor.webassembly.js:1:3325
22:07:52.412	    at new Promise (<anonymous>)
22:07:52.412	    at Object.beginInvokeJSFromDotNet (http://localhost:45678/_framework/blazor.webassembly.js:1:3306)
22:07:52.412	    at Object.Rt [as invokeJSFromDotNet] (http://localhost:45678/_framework/blazor.webassembly.js:1:59738)
22:07:52.412	    at _mono_wasm_invoke_js_blazor (http://localhost:45678/_framework/dotnet.6.0.0.okun7sem7f.js:1:193780)
22:07:52.412	    at wasm-function[2588]:0x8065b
22:07:52.412	   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[MudBlazor.Interop.BoundingClientRect, MudBlazor, Version=6.0.2.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
22:07:52.412	   at MudBlazor.MudDrawer.UpdateHeight()
22:07:52.412	   at MudBlazor.MudDrawer.OnAfterRenderAsync(Boolean firstRender)
22:07:52.412	   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
22:07:54.306	✅  crawled 4 out of 4 (/)
22:07:54.359	
22:07:54.806	Failed: build command exited with code: 1

It seems to run correctly (“crawled 4 out of 4”) but this error does not occur without the npx-snap line. Any idea what’s causing this to fail?

This issue is due to some bug in the Mudblazor framework.