window.URL.createObjectURL Blob ERR_INVALID_ARG_TYPE

[mckelveygreg]

Describe the bug

In one of my dependencies, window.window.URL.createObjectURL is being called, but it does not like the Blob argument that is being passed in, saying it isn't a Blob

TypeError: The "obj" argument must be an instance of Blob. Received an instance of Blob

Reproduction

My repro shows the same code in the lib that is failing. It is failing on 0.12.6, before #1340 was released, and on latest.

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.29 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 3.1.1 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 94.0.1
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2 
    vite: ^2.9.9 => 2.9.9 
    vitest: 0.12.9 => 0.12.9

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

I see that jsdom doesn't support URL.createObjectURL at all: issue. If we put jsdom's URL on global namespace, this call throws an error.

Although Node 16.7 supports it, so you can add to your setupFiles:

import { Blob } from 'buffer'
globalThis.Blob = Blob // use Node.js Blob instead of Jsdom's Blob

However it may create more issue with jsdom API's 👀

[mckelveygreg]

Oh my... thanks for surfacing that issue.

Well, after almost saying this wasn't working several times, I cleaned up what I was doing, and with the latest vitest and your global Blob suggestion, everything works!!

The only issue I had with the Blob is I was polyfilling fetch with whatwg-fetch. I switched to node-fetch and added that to globalThis.fetch with success!

I love working with the vitest community!! Thanks!

[kitsunekyo]

@mckelveygreg would you mind sharing how you exactly solved it? i'm unable to assign globalThis.fetch to the fetch from node-fetch as the types dont match and it throws a type error for me (using typescript)

Type '(url: string | Request, init?: RequestInit) => Promise<Response>' is not assignable to type '(input: RequestInfo, init?: RequestInit) => Promise<Response>'.
  Types of parameters 'url' and 'input' are incompatible.

[dennisMeeQ]

This surfaced for me when switching from vitest 0.22 -> 0.24 (and vite 2 -> 3). Fixed with @sheremet-va suggestion.

[warrenseine]

Alternatively, Object.defineProperty(window, 'Blob', Blob), which will prevent TypeScript errors.