按Vercel文档引入@vercel/analytics/react遇ESLint与TSC报错求助

问题分析 #

核心矛盾点：

• 官方文档要求的@vercel/analytics/react导入路径无法被ESLint解析，实际模块文件位于dist/react目录
• 直接引用dist/react路径时，TypeScript无法识别Analytics导出，原因是模块类型定义未正确映射该路径

解决方案 #

方案1：别名映射统一路径（推荐） #

同时配置ESLint和TypeScript，让两者都能正确识别@vercel/analytics/react的实际路径：

1. 安装ESLint别名解析插件

npm install eslint-import-resolver-alias --save-dev

2. 修改ESLint配置
   在.eslintrc.js中添加别名映射：

settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      paths: ['src'],
    },
    alias: {
      map: [
        ['@vercel/analytics/react', '@vercel/analytics/dist/react']
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
  }
}

3. 修改TypeScript配置
   在tsconfig.json的compilerOptions中添加路径映射：

{
  "compilerOptions": {
    // 其他原有配置...
    "paths": {
      "@vercel/analytics/react": ["node_modules/@vercel/analytics/dist/react"]
    }
  }
}

完成配置后，继续使用官方文档的导入方式：

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

此时ESLint和TypeScript均可正常解析路径，不再报错。

方案2：适配Next.js 12的模块版本 #

你使用的Next.js 12属于旧版本，可能与最新版@vercel/analytics的路径配置不兼容，可尝试安装适配版本：

npm install @vercel/analytics@0.1.11

该版本模块结构与官方文档完全匹配，无需额外配置即可正常使用。

方案3：临时使用默认导出（Workaround） #

若上述方案无法快速生效，可临时改用默认导出方式绕过报错：

import Analytics from '@vercel/analytics/dist/react';

此方式仅作临时应急，不推荐长期使用，因为不符合官方规范。

验证方法 #

配置完成后执行以下命令验证：

• ESLint检查：npx eslint pages/_app.tsx
• TypeScript编译：npx tsc --noEmit

若两者均无报错，即可正常使用Analytics组件。

内容的提问来源于stack exchange，提问作者tmilar