"Blob is not defined" error for inline web worker in SSR mode

[Bastian]

Describe the bug

I have a Svelte-Kit application that uses Vite under the hood.
When updating my Vite version, I got the following error when building the project and then trying to run it:

> Blob is not defined
ReferenceError: Blob is not defined
    at file:///home/bastian/dev/bstats-web/.svelte-kit/output/server/app.js:1237:14
    at ModuleJob.run (node:internal/modules/esm/module_job:175:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async start (file:///home/bastian/dev/bstats-web/node_modules/@sveltejs/kit/dist/chunks/index6.js:277:14)
    at async file:///home/bastian/dev/bstats-web/node_modules/@sveltejs/kit/dist/cli.js:649:4

The relevant generated code that causes the error looks like this:

var highlight = "";
const blob = new Blob([atob("<truncated>")], {type: "text/javascript;charset=utf-8"});
function WorkerWrapper() {
  const objURL = (window.URL || window.webkitURL).createObjectURL(blob);
  try {
    return new Worker(objURL);
  } finally {
    (window.URL || window.webkitURL).revokeObjectURL(objURL);
  }
}

Before the update, it looked like this:

var highlight = ".hljs{color:#000;display:block;overflow-x:auto;padding:.5em}.hljs-comment,.hljs-quote,.hljs-variable{color:green}.hljs-built_in,.hljs-keyword,.hljs-name,.hljs-selector-tag,.hljs-tag{color:#00f}.hljs-addition,.hljs-attribute,.hljs-literal,.hljs-section,.hljs-string,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type{color:#a31515}.hljs-deletion,.hljs-meta,.hljs-selector-attr,.hljs-selector-pseudo{color:#2b91af}.hljs-doctag{color:grey}.hljs-attr{color:red}.hljs-bullet,.hljs-link,.hljs-symbol{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.dark .hljs{color:#dcdcdc;display:block;overflow-x:auto;padding:.5em}.dark .hljs-keyword,.dark .hljs-literal,.dark .hljs-name,.dark .hljs-symbol{color:#569cd6}.dark .hljs-link{color:#569cd6;text-decoration:underline}.dark .hljs-built_in,.dark .hljs-type{color:#4ec9b0}.dark .hljs-class,.dark .hljs-number{color:#b8d7a3}.dark .hljs-meta-string,.dark .hljs-string{color:#d69d85}.dark .hljs-regexp,.dark .hljs-template-tag{color:#9a5334}.dark .hljs-formula,.dark .hljs-function,.dark .hljs-params,.dark .hljs-subst,.dark .hljs-title{color:#dcdcdc}.dark .hljs-comment,.dark .hljs-quote{color:#57a64a;font-style:italic}.dark .hljs-doctag{color:#608b4e}.dark .hljs-meta,.dark .hljs-meta-keyword,.dark .hljs-tag{color:#9b9b9b}.dark .hljs-template-variable,.dark .hljs-variable{color:#bd63c5}.dark .hljs-attr,.dark .hljs-attribute,.dark .hljs-builtin-name{color:#9cdcfe}.dark .hljs-section{color:gold}.dark .hljs-emphasis{font-style:italic}.dark .hljs-strong{font-weight:700}.dark .hljs-bullet,.dark .hljs-selector-attr,.dark .hljs-selector-class,.dark .hljs-selector-id,.dark .hljs-selector-pseudo,.dark .hljs-selector-tag{color:#d7ba7d}.dark .hljs-addition{background-color:#144212;display:inline-block;width:100%}.dark .hljs-deletion{background-color:#600;display:inline-block;width:100%}";
function WorkerWrapper() {
  return new Worker("data:application/javascript;base64,<truncated>", {type: "module"});
}

(I manually replaced the blob content with <truncated> as it's very long and not relevant for the issue).

It looks like the change to use blobs was introduced in #3468. This is also when the problem occurred: In version 2.3.3 everything worked fine and in 2.3.4 it no longer does.
I'm not sure, whether or not this change is the root of the issue or just a symptom.

The WebWorker is imported with import CodeHighlightWorker from "./CodeHighlightWorker?worker&inline"; (complete code). I don't think that its code is relevant, but if it is, you can find it here: CodeHighlightWorker.ts.

(Disclaimer: I'm not 100% sure if this is a Vite bug, a Svelte-Kit bug, or simply a bug in my own code/configuration)

Reproduction

This is my repository with the updated Vite version on a separate branch: https://github.com/Bastian/bstats-web/tree/vite-bug
You can clone it and run

git checkout vite-bug
npm install
npm run build
npm run preview

to reproduce the bug. If you need a minimal example, I can try to create one.

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 5.17 GB / 12.45 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.5 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Firefox: 88.0
  npmPackages:
    vite: ^2.3.4 => 2.3.4 

### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/.github/contributing.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).

[dejour]

a minimal example would be great

[Bastian]

Here's a minimal example: https://github.com/Bastian/vite-ssr-webworker-bug
When running npm run dev, everything works fine. However, once you build it with npm run build and then try to serve it with npm run serve, you get the same error:

bastian@Bastian-Desktop:~/dev/vite-ssr-webworker-bug$ npm run serve

> test-ssr-react@0.0.0 serve
> cross-env NODE_ENV=production node server

http://localhost:3000
ReferenceError: Blob is not defined
    at Module.<anonymous> (/home/bastian/dev/vite-ssr-webworker-bug/dist/server/entry-server.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at /home/bastian/dev/vite-ssr-webworker-bug/server.js:61:18
    at Layer.handle [as handle_request] (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/index.js:317:13)
ReferenceError: Blob is not defined
    at Module.<anonymous> (/home/bastian/dev/vite-ssr-webworker-bug/dist/server/entry-server.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at /home/bastian/dev/vite-ssr-webworker-bug/server.js:61:18
    at Layer.handle [as handle_request] (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/index.js:317:13)
ReferenceError: Blob is not defined
    at Module.<anonymous> (/home/bastian/dev/vite-ssr-webworker-bug/dist/server/entry-server.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at /home/bastian/dev/vite-ssr-webworker-bug/server.js:61:18
    at Layer.handle [as handle_request] (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/index.js:317:13)
ReferenceError: Blob is not defined
    at Module.<anonymous> (/home/bastian/dev/vite-ssr-webworker-bug/dist/server/entry-server.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at /home/bastian/dev/vite-ssr-webworker-bug/server.js:61:18
    at Layer.handle [as handle_request] (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/bastian/dev/vite-ssr-webworker-bug/node_modules/express/lib/router/index.js:317:13)

The code is based on https://github.com/vitejs/vite/tree/main/packages/playground/ssr-react without any notable changes (I just added Vite to the list of dependencies and removed some unnecessary components to make the example simpler).

[Bastian]

Thinking about it for a while, the error makes total sense: NodeJs does not have a built-in Blob type - it only exists in the browser.

[andreasg123]

I ran into this issue, too, when using a module built with Vite together with my Next.js app with SSR. next export produces the same error: hms-dbmi/viv#303 (comment)

It would be great if a solution could be found that doesn't use Blob so that SSR still works.