[🐛 Bug]: Incompatible with Next.js instrumentation

[Maronato]

next-on-pages environment related information

 System:
        Platform: darwin
        Arch: arm64
        Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6020
        CPU: (12) arm64 Apple M2 Max
        Memory: 64 GB
        Shell: /bin/zsh
Package Manager Used: npm (9.8.1)

Relevant Packages:
        @cloudflare/next-on-pages: 1.9.0
        vercel: 33.5.2
        next: 14.1.0

Description

next-on-pages breaks when using Next's default instrumentation @vercel/otel, resulting in the following error:

... rest of next build
⚡️ Completed `npx vercel build`.

⚡️ ERROR: A duplicated identifier has been detected in the same function file, aborting.

⚡️ Please report this at https://github.com/cloudflare/next-on-pages/issues.

Reproduction

Repo: https://github.com/Maronato/next-on-pages-instrumentation-repro

Steps to reproduce:

1. Create a new project with npm create cloudflare@latest next-on-pages -- --framework=next
2. Install @vercel/otel (npm install @vercel/otel)
3. Add experimental: { instrumentationHook: true } to your next config
4. Create a new file in the src or root of the project called instrumentation.ts
5. Paste the following contents:

// src/instrumentation.ts

import { registerOTel } from "@vercel/otel"

export function register() {
  registerOTel()
}

6. Build with npx next-on-pages

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

The error seems to happen in this function, but I'm not sure why.

A few notes:

• Calling registerOTel is not required. Simply printing it (console.log(registerOTel)) is enough to cause the error
• Vercel made the repo private, so I can't inspect the code https://github.com/vercel/otel
• The code that they ship is minified
• They say that you can use OTEL's libraries directly but it only works with Node. To use with edge you have to use their library

Would you like to help?

• Would you like to help fixing this bug?

[ostenbom]

If I run next-on-pages with --disableChunksDedup, it works ok. The duplicate identifier seems to be webpack! Is it safe to run un-deduped builds? 😄

[james-elicx]

If I run next-on-pages with --disableChunksDedup, it works ok. The duplicate identifier seems to be webpack! Is it safe to run un-deduped builds? 😄

It's safe to, you'll just have a much much larger bundle size

[jan-acemate]

Any update on this? @Maronato were you able to find a workaround other than disabling the ChunksDedup?

[jan-acemate]

Just leaving some insights, in case anyone is interested:

As @ostenbom indicated, the above error seems to originate from the Webpack module ID assignment. Overwriting the default assignment algorithm fixes the error; however, it results in a much larger bundle size (a factor of 8 in my case), which usually makes the bundle exceed Cloudflare's maximum limit of 25 MB.

Example that fixes the error, but bloats the bundle size:

//next.config.js
  webpack: (config) => {
    config.optimization = {
      ...config.optimization,
      moduleIds: false, // Disable built-in module ID algorithms
    };
    config.plugins.push(new webpack.ids.NaturalModuleIdsPlugin());
  }

I tried all algorithms listed in the webpack optimization documentation, but all of them either cause the build error or led to a significant increase in bundle size. Trying other options to reduce the bundle size did not make a significant difference.

This is unfortunate, as this is by far the most convenient way of adding observability to a Next.js application. From Cloudflare's perspective, fixing this would especially make sense given their acquisition of Baselime, which is currently almost useless for Cloudflare Pages (except for Edge logging). I hope this issue will be addressed at some point.

[ilyesm]

Hi!

Did anyone find a solution for this? We are trying to use the Next.js install method for Sentry, and get the following error when running npm run build:

▲  Created all serverless functions in: 2.156s
▲  Collected static files (public/, static/, .next/static): 8.329ms
▲  Build Completed in .vercel/output [1m]
⚡️ Completed `npx vercel build`.

⚡️ ERROR: A duplicated identifier has been detected in the same function file, aborting.

⚡️ Please report this at https://github.com/cloudflare/next-on-pages/issues.

[whoabuddy]

I just ran into this issue for https://github.com/aibtcdev/aibtcdev-frontend (feat/cloudflare branch), was looking to transfer services over to Cloudflare Pages but ran into the same error after following the config instructions. We are also using Sentry and the instrumentation.ts file.

Testing out the workaround now.

Edit: looks like that worked! For now just using --disableChunksDedup on the build step.

[bigmac44]

Setting @sentry/nextjs to version8.35.0 seems to fix/avoid the issue without needing to use disableChunksDepup. You can install 8.35.0 beforehand and then run the sentry wizard if need be and just say no when it asks if you want to update to the latest version.

#891 (comment)

[ArsaCore]

Setting @sentry/nextjs to version8.35.0 seems to fix/avoid the issue without needing to use disableChunksDepup. You can install 8.35.0 beforehand and then run the sentry wizard if need be and just say no when it asks if you want to update to the latest version.

#891 (comment)

Thanks.
Updating @sentry/nextjs version fixed the issue.

[f1shy-dev]

I get this issue just using @vercel/otel, not even sentry. (Similiar to the original poster) - Is there going to be a fix for this soon? 16MB bundle size isn't fun...