AFrame: Uncaught Error: Unsupported glTF-Binary header: Expected "%s" to be "%s"

I'm trying to load a model into A-Frame however I get the following error in the chrome console when opening the site:

Uncaught Error: Unsupported glTF-Binary header: Expected "%s" to be "%s".

The GLTF validator confirms that it's in the correct format, so I'm confused as to why it doesn't work.

Here's my HTML file:

<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden">
  <!-- <a-scene
    embedded
    arjs="sourceType: webcam; trackingMethod: best; maxDetectionRate: 60; detectionMode: mono; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;"
    renderer="antialias: true; alpha: true; precision: medium;"
    vr-mode-ui="enabled: false"
    stats
  > -->
  <a-scene>
    <!-- define your gltf asset -->
    <a-assets>
      <a-asset-item id="avocado" src="Avocado.glb"></a-asset-item>
    </a-assets>
    <!-- define a camera which will move according to the marker position -->
    <a-entity position="0 1 0" gltf-model="#avocado" scale="1 1 1"></a-entity>
    <a-entity camera></a-entity>
  </a-scene>
</body>

I'm serving the website using Vite, and the Avocado.glb model is the sample model taken from Khronos Group's official sample models repo.

Solution

Turns out I was using an outdated version of aframe. I got this code from their docs website. After updating aframe to 1.4.2 everything worked.