CODEWITHSUNDEEP
javascriptreactjsanalyticsvercel
yikes
yikes

Reputation: 1

Module not found error when trying to import '@vercel/analytics/react' in App.js in React app

Upon npm start, I am running into this error: Module not found: Can't resolve '@vercel/analytics/react' in 'C:\path-to-react-app\trivia-app\src' Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

As per instructions in https://vercel.com/docs/analytics/quickstart, I ran npm i @vercel/analytics and added import { Analytics } from "@vercel/analytics/react"; in my App.js file.

I have tried all of this so far:

These are the packages in my 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"
      }
    },

This is how my App.js is organised:

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;

Upvotes: 0

Views: 633

Answers (2)

SHAHID
SHAHID

Reputation: 81

The problem I encountered was that the package did not show up in package.json file after running npm i @vercel/analytics

This is how i resolved this issue in nextjs v14.1.0

Manually Add the Package to package.json:

1. Head to the Vercel Analytics Package Page:

Visit the Vercel Analytics package page on npm.

2. Grab the Package Version:

Note down the latest version of the package available on the npm page.

  1. Add this in package.json file

    "dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@vercel/analytics": "1.3.1" // Make sure to mention the latest version for this package

    }

4. Install the dependencies

npm i or yarn

Upvotes: 0

segFault
segFault

Reputation: 4054

I am not sure about the missing ./node_modules and I am not familiar with Vercel to know if that is a normal setup, but your package.json does not look correct.

You have defined a packages object within it, which does not appear to be an official npm property and I am not familiar with it.

With that said, you could try creating a new package.json file that is saved at the path: C:\path-to-react-app\trivia-app\package.json.

And within that file, copy the original packages object for "trivia-app" to the new package.json. So the new package.json file would look like this:

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

And then try running npm i from within your trivia-app directory (or using whatever Vercel specific commands you maybe using).

Upvotes: 0

Related Questions