Error on build next.js 13 app with analytics

[thigas88]

Next.js 13 Analytics 1.4.1

yarn run build yarn run v1.22.22 $ next build

Get this error :

Collecting page data ..file:///node_modules/@vercel/analytics/dist/next/index.mjs:159
import { useParams, usePathname, useSearchParams } from "next/navigation.js";
         ^^^^^^^^^
SyntaxError: Named export 'useParams' not found. The requested module 'next/navigation.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'next/navigation.js';
const { useParams, usePathname, useSearchParams } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:146:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:229:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
file:///Users/thiago/Projetos/deliveryfoody-web/node_modules/@vercel/analytics/dist/next/index.mjs:159
import { useParams, usePathname, useSearchParams } from "next/navigation.js";

[sajeebmahamed]

I resolved the issue by importing @vercel/analytics/react instead of @vercel/analytics/next

{
  "next": "13.0.7",
  "@vercel/analytics": "^1.4.1"
}

import { Analytics } from '@vercel/analytics/next';

[marcospgp]

just ran into a similar issue while trying to set up vercel analytics on a non next.js project

$ NODE_ENV=development bun --hot ./src/index.html
 DEV  Bun v1.2.18 ready in 7.54 ms

➜ http://localhost:3000/

Press h + Enter to show shortcuts
177 | import { useParams, usePathname, useSearchParams } from "next/navigation.js";
                                                              ^
error: Could not resolve: "next/navigation.js". Maybe you need to "bun install"?
    at /Users/marcos/Documents/GitHub/bombtimer.dev/node_modules/@vercel/analytics/dist/next/index.mjs:177:57
177 | import { useParams, usePathname, useSearchParams } from "next/navigation.js";
                                                              ^
error: Could not resolve: "next/navigation.js". Maybe you need to "bun install"?
    at /Users/marcos/Documents/GitHub/bombtimer.dev/node_modules/@vercel/analytics/dist/next/index.mjs:177:57

can confirm importing /react instead of /next fixes the issue

[laurentS]

Just adding that I was not getting any error, but was also seeing no page views in the analytics. Using the react import instead of the next one fixed the issue.

Analytics 1.5.0 next 13.4.1 / typescript