Multi-platform dependency cannot be correctly used with Next.js

[bripkens]

Link to the code that reproduces this issue

https://github.com/bripkens/nextjs-reproducer-oteljs

To Reproduce

1. Start in dev mode
2. Open the UI
3. Observe the console output

Current vs. Expected behavior

I would expect that Next.js honors the package.json hints to use different files
for web browsers. Specifically these hints:

https://github.com/open-telemetry/opentelemetry-js/blob/31eb60dc99dc066cf2085864f2727eb29ee76e91/experimental/packages/opentelemetry-instrumentation/package.json#L19-L24

However, when starting the dev server it can be observed that it is trying to transpile
the Node.js module variant instead of the browser variant. This is then resulting in
Webpack warnings that are also confirming this problem:

 ✓ Starting...
Creating Webpack config: { isServer: true, target: 'node18.17' }
Creating Webpack config: { isServer: true, target: [ 'web', 'es6' ] }
Setting aliasFields to ["browser"] for target [ 'web', 'es6' ]
Creating Webpack config: { isServer: false, target: [ 'web', 'es5' ] }
Setting aliasFields to ["browser"] for target [ 'web', 'es5' ]
 ✓ Ready in 1580ms
 ○ Compiling / ...
 ⚠ ./node_modules/.pnpm/@opentelemetry+instrumentation@0.50.0_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/.pnpm/@opentelemetry+instrumentation@0.50.0_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
./node_modules/.pnpm/@opentelemetry+instrumentation@0.50.0_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/index.js
./node_modules/.pnpm/@opentelemetry+instrumentation@0.50.0_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/instrumentation/build/esm/platform/index.js
./node_modules/.pnpm/@opentelemetry+instrumentation@0.50.0_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/instrumentation/build/esm/index.js
./src/app/instrumentation.web.tsx

Note the above output lines Creating Webpack config:…. I have tried to analyze/improve
on the Webpack config within the reproducer. However, I have observed that the Webpack config with the Node.js target is always used to transpile the module chain in question.

https://github.com/bripkens/nextjs-reproducer-oteljs/blob/main/src/app/layout.tsx#L9-L11

Note that it is possible to hide this error by also setting Webpack's aliasFields config to ['browser'] for the Node.js target. However, this is bound to cause issues with Next.js' server-side OpenTelemetry support.

Summarizing, I expect that Next.js will leverage the Node.js platform modules for server-side code and the browser platform modules for client-side code.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:25 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: N/A
  pnpm: 8.12.1
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Instrumentation, Output (export/standalone), Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response