Blob method does not exist in the result

How can I return the result in blob? It seems that .blob() does not exist

- Operating System: `Darwin`
- Node Version:     `v16.13.1`
- Nuxt Version:     `3.0.0-27319101.3e82f0f`
- Package Manager:  `npm@8.1.2`
- Bundler:          `Vite`
- User Config:      `css`, `watch`, `build`
- Runtime Modules:  `-`
- Build Modules:    `-`

const {data: banners, refresh: bannersFetcher} = await useAsyncData(
    'banners',
    async () => {
      const banners = await $fetch('/api/mc/banners')
        .then((data) => {
          return Promise.all(_.map(data, async (banner) => {
            const blob = await $fetch(banner.data).then(res => res.blob())
            console.log('Hey', blob)
          }))
        })
      // console.log(banners)
      return []
    }
)

[danielroe]

File is not supported by Node: https://developer.mozilla.org/en-US/docs/Web/API/File

[danielroe]

@frbuceta Apart from Blob support in ohmyfetch, the issue you were experiencing is solved if you return a value from map.

Example.

<template>
  <pre>
    {{ banners }}
  </pre>
</template>

<script setup>
import _ from "lodash";

// eslint-disable-next-line
const { data: banners, refresh: bannersFetcher } = await useAsyncData(
  "banners",
  async () => {
    const banners = await $fetch("/api/banners").then((data) => {
      return Promise.all(
        _.map(data, async (banner) => {
          // const blob = await $fetch.raw(banner.data).then((res) => res.blob());
          const blob = await fetch(banner.data).then((r) => r.blob());
          console.log(blob);
+          return blob;
        })
      );
    });
    console.log(banners);
+    return banners;
  }
);
</script>