`instanceof` doesn't work in middleware v12.2

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
Binaries:
  Node: 17.8.0
  npm: 8.5.5
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.2.0
  eslint-config-next: 12.2.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The instanceof operator doesn’t work in the new released middleware.

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  const obj = { hello: "world" };
  console.log(obj instanceof Object); // <-- this prints "false" in new middleware

  return response;
}

Expected Behavior

Expect above example to print “true”.

Link to reproduction

https://github.com/meikidd/nextjs-middleware-instanceof

To Reproduce

1. npm run dev
2. Open “http://localhost:3000”
3. Check the logs in Terminal. We expect “true”, but actually get “false”.

[feugy]

Thanks for the pointers on the incoming ECMA proposals. As you said it, edge-runtime is currently for dev only, and is not meant to provide strong isolation. We’ll surely revise is in the future, but it is out of scope for now.

We did some investigation with @javivelasco about the hack, and unfortunately it’s not gonna work.

TLDR; it's fixing instanceof, but breaking the polyfills

<div>

The EdgeVM (node.js’s VM module under the hood), has its own realm with its own Array constructor. Since it’s just a plain JavaScript environment, we must load some polyfills into it, to provide utilities such as TextEncoder, FormData and Fetch (there are dozens) of them.

In the current implementation, we load the polyfills in node.js realm, and injects them into the EdgeVM as globals. But there’s an drawback: the Array constructor used in the polyfill is the comming from node.js realm, while the EdgeVM has its own one. To fix this inconsistency, we also inject node.js’ Array into the EdgeVM context.

However, the JS engine does not use global Array constructor while building an array literal. And there’s no way to change this, because it’s how the ECMAscript spec defines it. So we have an inconsistency leading to this bug.

The suggested hack: Array = [].constructor reverts it back: the Array constructor inside EdgeVM realm becomes the same as the array literal, and different from the one used in the polyfills.

</div>

---

The only way to definitely fix this is to stop injecting anything from node.js, and load all the polyfills within the EdgeVM. It is nowhere simple, because EdgeVM (node.js’s VM module) is just a barebone JavaScript engine. It has no Buffer, no require()… And we need to provide or implement them.

[Kikobeats]

Hello, this has been addressed and shipped at Next.js v12.2.3:

console.log(request instanceof Object) // true
console.log(response instanceof Object) // true
console.log({} instanceof Object) // true

You can see more examples Edge Runtime test suite 🙂