I am trying to display my Emscripten compiled C++/SDL2 app from a React FE.

My .js and .wasm files are being stored on an AWS S3 bucket and fetched from a CloudFront CDN. The .js file gets put on a <script> tag and appended to the page (this works).

The .js file cannot find the .wasm file. Normally this process happens in a method called locateFile() which returns a string path (How can I load .wasm files stored in a subdirectory?). I've overrided this by appending another script with a global Module right before it and attempted to use the cdn:

var Module = {
  locateFile: (function locateFile(path) {
    return `${CDN_WASM_URL}`
  })()
}

However this results in Aborted(CompileError: WebAssembly.instantiate(): expected magic word... found ... which indicates that the returned type may not be correct. I have confirmed the same file works by referencing it locally. However, when running .text() on the Response of fetching both from the CDN and from the local file, the local version appears as random symbols while the result from the CDN shows the actual code of the wasm file.