Running analytics in both App and Pages router.

[kobeaerts-dep]

Hey, we are running into issues with the speed-insights and analytics packages.
We are running both the pages and app router in the same project.

For the app router we can import both from the analytics/next package and everything works. When we do the same for the pages router we get the following error:

Error: Failed to load external module @vercel/speed-insights-bcbcb3a010496fd7/next: Error: Cannot find module 'next/dist/server/route-modules/pages/vendored/contexts/app-router-context'
Require stack:
- /var/task/node_modules/next/dist/client/components/navigation.js
    at Context.externalImport [as y] (.next/server/chunks/ssr/[turbopack]_runtime.js:518:15)
    at async (.next/server/chunks/ssr/[root-of-the-server]__7b0c281d._.js:1:54)

https://cleanshot.com/share/8vWvkr8q [blocked]

Both packages do work in our pages router if we import from the /react version.

SpeedInsights & Analytics are on v2.0.0
Next.js version is 16.1.6

[feugy]

hello @kobeaerts-dep, and thanks for your bug report.

First triage question: did this worked in the previous versions of the packages? (@vercel/analytics@1.6.1 and @vercel/speed-insights@1.3.1). Please give them a try and let us know.

Second question, are you using pages and app router in the same Nextjs application?

[kobeaerts-dep]

@feugy no, we had the same issue with the previous packages.
I updated this morning to 2.0.0 in the hopes that would fix it 😅

We're using pages and app router in the same app.

[feugy]

I must admit that I've never tried such thing.

It surely is a complex bundling issues, because the Next.js specific code in analytics/next depends on the router used.
That also explains why it works with analytics/react: there is no code trying to identify the current route.

Would it be possible for you to try using analytics/next and speed-insights/next in the app router and analytics/react and speed-insights/react in the pages router? To confirm my gut feeling.

[kobeaerts-dep]

That does indeed fix it (we already had this fix in place) but it seems like we lose some "route" information that way?

[feugy]

Ok cool, it is a bundling issue after all.

Route is a framework (Next.js, Nuxt, Sveltekit) concept which libraries (React, Vue, Svelte) don't have. Hence why the app does not return route when used with analytics/react.

I'll see with the team how we can support analytics/next used simultaneously in pages and app router. Hoping to find a solution before you complete your migration to the app router