Cannot compile /instrumentation whilst using babel since 14.2

[Joezo]

Link to the code that reproduces this issue

https://github.com/Joezo/nextjs-instrumentation-babel-bug

To Reproduce

1. create a new nextjs app using create-next-app (npx create-next-app -e reproduction-template-pages)
2. npm install @vercel/otel
3. add a .babelrc file containing just next/babel preset

   {
     "env": {
       "development": {
         "presets": ["next/babel"]
       }
     }
   }

4. enable the instrumentationHook experiment in next.config
5. create an instrumentation.ts file that contains

   import { registerOtel } from '@vercel/otel'
   export function register() {
     registerOTel({ serviceName: "next-app" })
   }

6. run npm run dev

Current vs. Expected behavior

Current behaviour:

➜ npm run dev

> dev
> next dev

  ▲ Next.js 14.3.0-canary.37
  - Local:        http://localhost:3000
  - Experiments (use with caution):
    · instrumentationHook

 ✓ Starting...
   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
   Using external babel configuration from REDACTED/babel-otel-bug/.babelrc
 ○ Compiling /instrumentation ...
 ✓ Compiled /instrumentation in 1915ms (83 modules)
TypeError: An error occurred while loading instrumentation hook: (0 , _vercel_otel__WEBPACK_IMPORTED_MODULE_0__.registerOTel) is not a function
    at Module.register (webpack-internal:///(instrument)/./instrumentation.ts:8:63)

Behaviour on next 14.1

➜ npm run dev

> dev
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000
   - Experiments (use at your own risk):
     · instrumentationHook

   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
   Using external babel configuration from REDACTED/babel-otel-bug/.babelrc
 ✓ Compiled /instrumentation in 448ms (84 modules)
 ✓ Ready in 2.5s

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.37 // Latest available version is detected (14.3.0-canary.37).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Instrumentation, Module Resolution, Runtime, Webpack

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

next dev (local), next build (local), next start (local)

Additional context

It looks like 14.1.1-canary.78 introduced this. It works fine on 14.1.1-canary.77. I suspect it's probably this change given the changes that were part of that release. https://github.com/vercel/next.js/pull/62622

[ezequiel]

Still an issue as of 14.2.11. This is preventing us from upgrading.

cc @ijjk curious if this is on your radar?

[maisano-patreon]

Also running into this issue on latest 14.

[BowlingX]

I was able to fix the issue by adjusting the configuration and add the following experimental entry:

experimental: {
    serverComponentsExternalPackages: ['@vercel/otel'],
}

Tested with next.js, 14.2.13

[Joezo]

@BowlingX this seems to work for us, thanks so much!