Edge compiler is not choosing browser bundle for module

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
Binaries:
  Node: 16.14.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.6
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

Describe the Bug

We utilize the debug module in our codebase and are hoping to be able to within edge middleware as well. My understanding is that the edge compiler will favor a browser bundle over the main / node.js bundle if present. See https://github.com/vercel/next.js/issues/32369#issuecomment-1092859859.

However, this doesn’t seem to be the case when attempting to use the debug module. browser is defined, yet when running with next dev we see the node.js bundle is being used.

error - ./node_modules/debug/src/node.js:5:0
Module not found: Can't resolve 'tty'

Import trace for requested module:
./node_modules/debug/src/index.js
./pages/_middleware.ts

https://nextjs.org/docs/messages/module-not-found

You're using a Node.js module (tty) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

Expected Behavior

I would expect the browser bundle is used by the edge compiler.

To Reproduce

1. Run:

npx create-next-app@latest --ts
npm i debug
npm i @types/debug -D

1. Create _pages/middleware.ts:

import type { NextFetchEvent, NextRequest } from 'next/server';
import debug from 'debug';

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  debug('Hellow, world!');
  return new Response('Hello, world!');
}

1. Run: npm run dev

[huozhi]

@ambrauer Yeah that alias solution also works. And thanks for the feedback, we’ll try to improve the documentation on our side

[ambrauer]

Thanks for the clarification @huozhi. It’s not as straightforward for us since debug is used in a shared package (used on all runtimes). We will need to re-evaluate, but for now we have a workaround using a webpack config adjustment.

webpack: (config, options) => {
  if (options.isServer && options.nextRuntime === 'edge') {
	config.resolve.alias.debug = require.resolve('debug/src/browser');
  }

  return config;
}

Between this change and removal of shims for native Node modules (in #36776 mentioned by @wadehammes), just trying to recover from the breaking changes dropped for edge middleware in 12.1.6. All totally expected being beta and all, just caught us by surprise 😃

Thanks again!