Edge compiler is not choosing browser bundle for module

[ambrauer]

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 #32369 (comment).

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

2. 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!');
}

3. Run: npm run dev

[huozhi]

We have removed the field picking for browser field since it's pretty confusing, some libraries browser target bundle are also using DOM api which is not edge runtime compatible. Now it only consumes the module and main field for library. If you're sure about a library's browser exports could work with edge runtime, you need to manually import that bundle or use the package exports which is pointing to that bundle.

In this case, you need to change the imports to import dbeug from 'debug/src/browser'

[wadehammes]

Related to #36776

[huozhi]

@wadehammes they're different issues, browser field is not supported as expected. close this one as the solution is contained in previous comment.

[wadehammes]

Different yes, but the error output is the same. Middleware is broken in 12.1.6 compared to 12.1.5. I'm assuming due to stricter enforcement of what is allowed to be imported.

[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!

[huozhi]

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

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.