Nextjs Middleware doesn't work with webpack URL assets ( `new URL(..., import.meta.url)` ) , `ReferenceError: document is not defined`

What version of Next.js are you using?

12.0

What version of Node.js are you using?

v14.17.5

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

vercel

Describe the Bug

When using middleware, got error ReferenceError: document is not defined

Here’s the code: https://github.com/quran/quran.com-frontend-next/blob/e64f1200a17ed162a394447898d4f729d8851a36/src/pages/test-geo/_middleware.ts

/* eslint-disable import/prefer-default-export */
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const { geo } = req;

  return new Response(JSON.stringify({ message: 'hello world!', geo }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

Here’s the API URL: https://quran-com-95pgbz4dx-qurancom.vercel.app/test-geo

And the vercel log is here : https://vercel.com/qurancom/quran-com/5byW9AFxDFa93J9AUtGS97PJR8FV/functions

We tried to pinpoint the issue, turns out the problem is here https://github.com/quran/quran.com-frontend-next/blob/0d120d9e44e590702cd8f58b3a99b110af390eff/src/hooks/useTarteelVoiceSearch.ts#L180

new AudioWorklet(new URL('src/audioInput/MicInputProcessor.ts', import.meta.url)),

The problem is related to import.meta.url https://webpack.js.org/guides/asset-modules/#url-assets

Expected Behavior

no error

To Reproduce

The repo is open source

• This is the reference commit

• Install the dependencies

• yarn dev

• go to localhost:3000/test-geo

[javivelasco]

This was fixed by https://github.com/vercel/next.js/pull/33134 and released in 12.0.8

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.