Error: Can't find end of central directory : is this a zip file ? when parsing a shp file

[helxsz]

I am working with vue3 to load a shp file as shown below, this shp file can work out in other shapefile based software

      <el-upload
        ref="uploadRef"
        action="/"
        v-model:file-list="state.uploadList" 
        :on-change="uploadFile"
        >
            <template #trigger>
                <el-button type="primary">select file</el-button>
            </template>

    </el-upload>

const uploadFile = async (file) => {
    const format = file.name.split('.').at(-1).toLowerCase();
    let geojson: FeatureCollection<any>;
    switch (format) {
      case 'shp': {
        console.log( await file.raw.arrayBuffer()  );
        const parsed = await shp(await file.raw.arrayBuffer());
        geojson = parsed;
        break;
      }
  }
}

await file.raw.arrayBuffer() outputs

ArrayBuffer(59664156) byteLength: 59664156

but shp(await file.raw.arrayBuffer()); throws out an error

Uncaught (in promise) Error: Can't find end of central directory : is this a zip file ? If it is, see https://stuk.github.io/jszip/documentation/howto/read_zip.html
    at h.readEndOfCentral (shpjs.js?v=9c11b5bb:1045:63)
    at h.load (shpjs.js?v=9c11b5bb:1065:40)
    at shpjs.js?v=9c11b5bb:290:23
    at async unzip_default (shpjs.js?v=9c11b5bb:6488:3)
    at async parseZip (shpjs.js?v=9c11b5bb:6970:15)
    at async Module.loadGeojson (shp.ts:61:24)

shpjs 's version is "^5.0.1".

[kissu]

Related question: https://stackoverflow.com/q/78659655/8816585