Middleware: ReferenceError: document is not defined

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.x

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When you have middleware and a web worker, all pages crash from an error in the middleware chunk.

ReferenceError: document is not defined
    at /Users/kristo/d/circulation-patron-web/.next/static/chunks/webpack-middleware-0775957e405959fc.js:298:36
    at /Users/kristo/d/circulation-patron-web/.next/static/chunks/webpack-middleware-0775957e405959fc.js:386:12
    at /Users/kristo/d/circulation-patron-web/.next/static/chunks/webpack-middleware-0775957e405959fc.js:391:12
    at Script.runInContext (node:vm:139:12)
    at Script.runInNewContext (node:vm:144:17)
    at Object.runInNewContext (node:vm:298:38)
    at runInContext (/Users/kristo/d/circulation-patron-web/node_modules/next/dist/server/web/sandbox/context.js:69:33)
    at Object.run (/Users/kristo/d/circulation-patron-web/node_modules/next/dist/server/web/sandbox/sandbox.js:14:9)
    at Server.runMiddleware (/Users/kristo/d/circulation-patron-web/node_modules/next/dist/server/next-server.js:448:46)

This appears to originate from the following code in one of my webpack-middleware chunks:

/******/ 	/* webpack/runtime/jsonp chunk loading */
/******/ 	!function() {
/******/ 		__webpack_require__.b = document.baseURI || self.location.href;

The middleware function I added is as simple as possible:

// _middleware.ts
import { NextRequest, NextFetchEvent, NextResponse } from "next/server";

export default async function middleware(
  _req: NextRequest,
  _ev: NextFetchEvent
) {
  return NextResponse.next();
}

Reproduction

Here is a reproduction: https://stackblitz.com/edit/nextjs-v5luqm?devtoolsheight=33&file=pages/counter.js

Note:

• If you comment out the worker-counter.js import and use the workerless-counter.js instead, it works.
• If you remove the _middleware.js page, it works.
• If you import the worker, and have the middleware, no page anywhere will work.

I’m not sure how this happens, but my guess is that when webpack detects a worker, it changes how it builds in a way that is incompatible with the edge runtime.

In my app it doesnt happen in development, only after a full build. In the repro, it also happens in dev. I also noted that the offending code is in the middleware chunk, and doesn’t appear when you don’t have the worker.

Expected Behavior

The middleware chunk should not be impacted by the web worker.

To Reproduce

https://stackblitz.com/edit/nextjs-v5luqm?devtoolsheight=33&file=pages/counter.js

[OwenMelbz]

Same thing happening here after updating to v12 and trying to add Basic Auth protection.

Error was:

Unhandled Runtime Error ReferenceError: document is not defined

/* webpack/runtime/jsonp chunk loading */
/******/ 	!function() {
/******/ 		__webpack_require__.b = document.baseURI || self.location.href;

[rplotkin]

Getting more specific:

/* webpack/runtime/jsonp chunk loading */
/******/ 	!function() {
/******/ 		__webpack_require__.b = typeof document !== 'undefined' && document.baseURI || typeof self.location !== 'undefined' && self.location.href;
/******/

That line, __webpack_require__.b, is NOT present when the Worker code is absent. Also, __webpack_require__.b is not utilized in the closure. It is a completely unnecessary line throwing the error.