Could not start the Development System. Please make sure you have WebAssembly enabled.

[jmkolbe]

Precondition: Playground Docker image build from main branch, tagged spicedb-playground:master

1. run container via docker run -it -p 3000:3000 spicedb-playground:master
2. load <host>:3000 in browser FF (based on 115.6.0esr) or Edge (123.0.2420.81)

Expected: Playground environment with validation support
Observed: Playground environment with non-working validation support and error "Could not start the Development System. Please make sure you have WebAssembly enabled."

The feature works on https://play.authzed.com/schema, meaning the browsers apparently support the required features

[josephschorr]

@jmkolbe I've validated it works locally with both Chrome and Firefox. Are you perhaps accessing the running image remotely over a slow internet connection? That error often comes up when the WASM bundle timeouts while loading

[jmkolbe]

@josephschorr thanks for checking. I tried to find the difference between the two instances in the dev console and noticed this in the local instance, but not in the public playground:

Failed to load developer package: CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 76 65 72 73 @+0
(anonym) @ developerservice.ts:288
A @ main.1a9304bf.chunk.js:21
Promise.then (asynchron)
w @ main.1a9304bf.chunk.js:21
S @ main.1a9304bf.chunk.js:21
Promise.then (asynchron)
w @ main.1a9304bf.chunk.js:21
S @ main.1a9304bf.chunk.js:21
Promise.then (asynchron)
w @ main.1a9304bf.chunk.js:21
S @ main.1a9304bf.chunk.js:21
Promise.then (asynchron)
w @ main.1a9304bf.chunk.js:21
S @ main.1a9304bf.chunk.js:21
Promise.then (asynchron)
w @ main.1a9304bf.chunk.js:21
(anonym) @ main.1a9304bf.chunk.js:21
a @ main.1a9304bf.chunk.js:21
(anonym) @ developerservice.ts:228
(anonym) @ developerservice.ts:314
X1 @ react-dom.production.min.js:244
v1 @ react-dom.production.min.js:286
$c @ react-dom.production.min.js:273
hn @ react-dom.production.min.js:127
h1 @ react-dom.production.min.js:274
Il @ react-dom.production.min.js:312
p2 @ react-dom.production.min.js:313
i.render @ react-dom.production.min.js:322
706 @ index.tsx:9
a @ schema:1
t @ schema:1
r @ schema:1
(anonym) @ main.1a9304bf.chunk.js:1
8 weitere Frames anzeigen
Weniger anzeigen

P.S.: Sorry it's in German, for the life of me I will never understand why debugging output gets translated.

[josephschorr]

@jmkolbe Are you running any sort of proxy or intermediary between your browser and the Playground instance? Perhaps a load balanacer of some kind?

[shivantaher-oviva]

I have the same issue running this from Docker using the instruction from the readme on MacOS.

[docbobo]

Exact same problem here on MacOS...

[nik-kumar-td]

Apologies to add to the pile, but I am facing the same issue. I have tried on both firefox and chrome. Followed the instructions as per the README.md#docker.

[pot-code]

same problem on windows11. bad magic number

[docbobo]

Okay, I just got it to work with a locally build version. The culprit is git-lfs. Without having it installed on the system, the two files inside the wasm directory are placeholders that start with the word version which is the byte sequence 76 65 72 73 ...

If you install git-lfs first, then do a git lfs pull, the files will be replaced with the real ones. Doing a manual docker build afterwards will result in a working playground.

I am guessing that maybe the build system that created the original playground image does not have git-lfs installed...

[samkim]

Thanks for posting your findings! I'll get the release workflow updated to correctly download lfs files during the build.