ESLint is throwing an error message that says:
ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved)
The issue arises in this line of code:
import { Analytics } from '@vercel/analytics/react';This error occurred while following the instructions from the Vercel quickstart guide for Next.js.
To summarize, the steps instructed were:
1- Install the package using NPM
npm install @vercel/analytics
2- In the /pages/_app.tsx file, import it as follows:
import { Analytics } from '@vercel/analytics/react';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
export default MyApp;
The packages used in my project are:
"next": "^12.1.0",
"react": "17.0.2",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
...
The folder structure of the installed NPM package is:
/node_modules/@vercel
analytics/
dist/
react/
index.cjs
index.d.ts
index.js
index.cjs
index.d.ts
index.js
package.json
tsconfig.json
...
I noticed that the actual path in node_modules is '@vercel/analytics/dist/react' rather than just '@vercel/anaylitics/react' as mentioned in the code provided.
When clicking on the imported variable Analytics, my IDE directs me to the definition in node_modules at
@vercel/analytics/dist/react/index.d.tsMy ESLint configuration related to the import/ module is:
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['src'],
},
},
},
If I modify the import statement to:
import { Analytics } from '@vercel/analytics/dist/react'
ESlint no longer throws an error, but TypeScript does with the message:
TS2305: Module '"@vercel/analytics/dist/react"' has no exported member 'Analytics'.
Despite that, the IDE successfully finds the definition and the export statement is present, indicating it should work correctly.
What adjustments should be made to the ESlint config or steps taken to resolve this issue without any linting or compiler errors?