React项目导入@vercel/analytics/react时遇模块未找到错误

执行npm start时触发两个错误：

1. 模块解析失败：Module not found: Can't resolve '@vercel/analytics/react' in 'C:\path-to-react-app\trivia-app\src'
2. Chokidar文件监听错误：Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

已按官方指引执行npm i @vercel/analytics，并在App.js中添加了import { Analytics } from "@vercel/analytics/react";。

已尝试的排查方案：

• 删除package-lock.json后重新执行npm install
• 改用import { Analytics } from "@vercel/analytics";导入

项目依赖片段（package-lock.json） #

"packages": {
  "": {
    "name": "trivia-app",
    "version": "0.1.0",
    "dependencies": {
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "@vercel/analytics": "^1.2.2",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-router-dom": "^6.22.3",
      "react-scripts": "^3.0.1",
      "web-vitals": "^2.1.4"
    }
  },

App.js代码结构 #

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import WelcomePage from './components/WelcomePage';
import QuizPage from './components/QuizPage';
import ResultsPage from './components/ResultsPage';
import { Analytics } from "@vercel/analytics/react";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<WelcomePage />} />
          <Route path="/quiz" element={<QuizPage />} />
          <Route path='/results' element={<ResultsPage />} />
        </Routes>
      </Router>
      <Analytics />
    </>
  );
}

export default App;

处理@vercel/analytics/react模块找不到问题 #

你的@vercel/analytics版本为1.2.2，该版本不存在@vercel/analytics/react的命名导出路径，官方文档的写法对应更高版本。可二选一解决：

1. 升级依赖到最新版
   执行命令：

npm install @vercel/analytics@latest

升级后即可正常使用import { Analytics } from "@vercel/analytics/react";的写法。

2. 适配当前版本的导入方式
   无需升级依赖，修改导入语句为默认导出：

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

组件内的<Analytics />使用方式保持不变。

额外提示：你的react-scripts版本为3.0.1（非常老旧），可能与新版依赖存在兼容性问题，建议同步升级：

npm install react-scripts@latest

处理Chokidar的EBUSY错误 #

该错误是系统进程锁定了C:\DumpStack.log.tmp文件，解决方法：

• 打开任务管理器，找到占用该文件的进程（多为Windows调试或系统服务），结束进程后重启项目。
• 若无法定位进程，直接重启电脑释放文件锁，再执行npm start。

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