Getting: "ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved)" but package & path inside is actually present

Question

As the title says, ESLint is complaining with this error message:

ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved)

In the line: import { Analytics } from '@vercel/analytics/react';

When following the instructions from this Vercel quickstart guide, using Next.js.

To sum up, the instructions are:

1- install package via NPM

npm install @vercel/analytics

2- in /pages/_app.tsx file, import it:

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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

export default MyApp;

My packages used:

    "next": "^12.1.0",
    "react": "17.0.2",

    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-next": "^12.2.5",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.10.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest": "^24.7.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-testing-library": "^3.10.2",

The NPM package installed, has this folder structure:

/node_modules/@vercel
  analytics/
    dist/
      react/
        index.cjs
        index.d.ts
        index.js
      index.cjs
      index.d.ts
      index.js
    package.json
    tsconfig.json
    ...

Notice how the path in node_modules actually is '@vercel/analytics/dist/react' rather than just '@vercel/anaylitics/react' as the instructions state to do in the code to use it.

But, when CTRL+click'ing on the variable imported Analytics, my IDE properly navigates me to the definition in node_modules, to the file @vercel/analytics/dist/react/index.d.ts, which is defined like so:

// ./node_modules/@vercel/analytics/dist/react/index.d.ts

// ...

declare function Analytics(props: AnalyticsProps): JSX.Element;

export { Analytics };

My ESLint config related to the import/ module is

settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      paths: ['src'],
    },
  },
},

If I import it as this instead:

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

then ESlint doesn't complain, but TSC does, with this error message:

TS2305: Module '"@vercel/analytics/dist/react"' has no exported member 'Analytics'.

Which also doesn't seem to make sense as the IDE is still finding the definition, and I can also see how the export { Analytics } line is there, so it should work...

What ESlint config or steps should I take differently to make this work without any lint/compiler errors?

Contact

Have the same issue but even the vercel ci crashed with an error because of this. Very strange! I guess, @vercel has to roll out a fix for this in the package? – Composed

Answer 1

When using eslint you will need to use the plugin: eslint-import-resolver-typescript with version 3.1.0 or later.

We also merged this version into eslint-config-next in this Pull Request. So this issue should also be resolved by upgrading to the latest package (13.0.4)

There is also a issue on our Github repo which with the solution: https://github.com/vercel/analytics/issues/18#issuecomment-1318424277

Simms

Answer 2

I have a question into vercel for a solution as I have the same issue. Probably to be expected since this is a beta product. I added the following line to my _app.js file in the meantime which allowed me to bypass the linting error and deploy to vercel. I have tested and the analytics is showing so must simply be a bug.

...
// eslint-disable-next-line import/no-unresolved
import { Analytics } from "@vercel/analytics/react";
...

Ethnology

Answer 3

Try this way

//tsconfig.json
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@vercel/analytics/react": ["./node_modules/@vercel/analytics/dist/react"]
    }
}

Felton

Sorry, that didn't help... the error is related to ESlint, and this change affects the TS config/compiler only – Contact

Answer 4

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.

Manually add this package to your 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

}

then run:

 npm i or yarn

Biblical