Prismic Media Fields load as unusable Blobs

[malee31]

I am attempting to server-render an audio component that uses MP3 files uploaded to the Media Library in Prismic, but the client is returning Blobs which render them unusable once the site makes its way back to the client.

I've searched through the documentation and have not been able to find anyway to disable the blobs, but it feels like there must be some way to get the direct link to the media on Prismic somehow.

Since the client just makes calls to the API to fetch the urls, I'm wondering if this is a bug internal to the Prismic API that makes audio files unusable

Versions

• @prismicio/client: v7.17.2
• node: v20.11.0
• next (Next.js): v15.3.2

Reproduction

1. Open Slice Machine
2. Create a new AudioPlayer Slice
3. Create a new Link to Media field named audio_file
4. Sync with Prismic
5. Open Prismic to create an instance of the Slice
6. Create an AudioPlayer slice on any page
7. Upload and attach an MP3 file
8. Observe response from Prismic Client (URL is a blob local to the server

{
  variation: 'default',
  version: 'initial',
  items: [],
  primary: {
    audio_file: {
      link_type: 'Media',
      key: '9xxxxx-a23a-4xxx-bxx4-0xxxx900xxx9',
      kind: 'file',
      id: 'temp-3xxxxxx4-3xx8-4xxd-axx1-5e9xxxxxxx76',
      url: 'blob:https://myrepo.prismic.io/64xxxxxx-cxx9-4xx4-bxx7-4xxxxxxxxxx0',
      name: 'SomeRandomMp3.mp3',
      size: '7000000'
    }
  },
  id: 'audio_player$fxxxxxx-3xx8-4xx6-bxxb-2xxxxxxxxxx1',
  slice_type: 'audio_player',
  slice_label: null
}

Steps to reproduce

Use a server-side rendering framework (Next.js in this case) and attempt to load the slice with the Prismic Client and place the URL returned by the client into the following as the src:

<audio controls>
  <source src="<INSERT SOURCE HERE>"/>
</audio>

Optionally put type="audio/mpeg" in the <source> tag.

What is expected?

Prismic should return a normal https:// url rather than a blob:https:// url for the audio file and the <audio> tag should be able to play the audio file just fine.

What is actually happening?

The Prismic Client returns a blob: URL which will not work on any device except the Javascript environment that generated the blob.

I have not confirmed that the blob works when the Prismic Client is run on the client side instead of the server-side, but that would not solve the issue since I am trying to keep the client exclusively on the server.

I could not find a way to get the URL as an https:// url without a blob in the documentation, but maybe I am missing something.

[github-actions]

This issue has been labeled as a bug since it was created using the 🚨 Bug Report Template.

Hi there, thank you so much for the report!

Following our Maintenance Process, we will review your bug report and get back to you next Wednesday. To ensure a smooth review of your issue and avoid unnecessary delays, please make sure your issue includes the following:

• Information about your environment and packages you use (Node.js version, package names and their versions, etc.)
  Feel free to attach a copy of your package.json file.
• Any troubleshooting steps you already went through
• A minimal reproduction of the issue, and/or instructions on how to reproduce it

If you have identified the cause of the bug described in your report and know how to fix it, you're more than welcome to open a pull request addressing it. Check out our quick start guide for a simple contribution process.

If you think your issue is a question (not a bug) and would like quicker support, please close this issue and forward it to an appropriate section on our community forum: https://community.prismic.io

- The Prismic Open-Source Team

[malee31]

After re-reading the source code for fetching in Client.ts and finding no results in this repository for Blob and createObjectURL, I think this may be a bug with Prismic itself, not the client.

[malee31]

Further investigation shows that reproduction may prove difficult.
It looks like most of the Audio Players have valid MP3 URLs, but one specific player managed to make its way to the API as a Blob.

Opening the file directly from the Prismic Media Library still results in the original file as intended.

[lihbr]

Hi @malee31, sorry to read you're encountering issues with our API.

I tried reproducing your issue but I can't get the API to return blobs like you (example response)
Would you be able to provide a similar link to the CDN response from the query you made to Prismic?

With the client you can log queried URL like so:

const client = prismic.createClient("you-repository", {
  fetch(url, options) {
    console.log(url)

    return fetch(url, options)
  }
})

Can you try with another MP3 file also in an attempt to confirm the wrong behavior on your end?

Best,
Lucie

[malee31]

Hi @lihbr,

I can't get it to replicate and it seems like rather than the API producing blobs, it has internally stored the result as a blob.

I prefer not to keep the repository name and details public for too long, so I'll clear this link once you reply, but you can see blob: here: [REDACTED]

[malee31]

If you could edit out the links from the comment and edit history after taking note of it, that would be great

[lihbr]

Hey @malee31, we identified the source of your issue and can confirm this is a bug on the API side, not @prismicio/client. We'll be working on a fix ☺

[malee31]

Happy to hear the bug report was of use.
Would you like us to keep that specific slice untouched so you all can confirm that the fix works once it is merged in?

We aren't in a rush to fix it since it is an archived document, so if it is helpful we can leave it as is for a while longer. I have a feeling that removing the slice and adding it back would fix it on our end (if you would like to test that, feel free to modify that document).