尝试在 React 应用程序的 App.js 中导入“@vercel/analytics/react”时出现模块未找到错误

Question

在

npm start

上，我遇到了这个错误： 找不到模块：无法解析“C:\path-to-react-app rivia-app\src”中的“@vercel/analytics/react” 来自 chokidar (C:) 的错误：错误：EBUSY：资源繁忙或锁定，lstat 'C:\DumpStack.log.tmp'

按照 https://vercel.com/docs/analytics/quickstart 中的说明，我运行了

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;

Answer 1

我不确定缺少的

./node_modules

，而且我不熟悉 Vercel，不知道这是否是正常设置，但你的

package.json

看起来不正确。

您在其中定义了一个

packages

对象，该对象似乎不是官方的 npm 属性，我对此并不熟悉。

话虽如此，您可以尝试创建一个新的

package.json

文件，并将其保存在路径：

C:\path-to-react-app\trivia-app\package.json

。

并在该文件中，将“trivia-app”的原始包对象复制到新的

package.json

。所以新的

package.json

文件将如下所示：

{
  "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"
  }
}

然后尝试从

npm i

目录中运行

trivia-app

（或使用您可能使用的任何 Vercel 特定命令）。