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

[elijahcarrel]

Steps to reproduce:

• Take an existing vercel project that uses ESLint using the /pages model (I did not test one under the /app model). For example: https://github.com/elijahcarrel/inbox-comics/tree/1a92764f82d5be81f7f194d8c93eb03d08e2e0f8.
• Per the instructions at https://vercel.com/docs/concepts/analytics/audiences/quickstart:
  • Run npm install @vercel/analytics
  • In _app.jsx (or _app.tsx if relevant), add import { Analytics } from "@vercel/analytics/react";.
• Try to deploy with vercel

Expected behavior:

• Deployment is successful

Actual behavior:

• Deployment fails:

  2022-11-17T04:00:34.842Z  Failed to compile.
  2022-11-17T04:00:34.842Z
  2022-11-17T04:00:34.842Z  ./pages/_app.tsx
  2022-11-17T04:00:34.843Z  10:27  Error: Unable to resolve path to module '@vercel/analytics/react'.  import/no-unresolved

Workaround:

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

Version: 0.1.5

This is also as described in https://stackoverflow.com/a/74453475/2736037.

[tobiaslins]

Hey! Thanks for reporting. We'll take a closer look into this. I'll keep you posted!

[tobiaslins]

Hey! I just had a deeper look into this. It seems like you don't have the plugin eslint-import-resolver-typescript which is required that Eslint knows how to resolve this module.

I saw that you have installed eslint-config-next but not using it (which uses this resolver plugin). You did import "plugin:@next/next/recommended" instead. If you change the eslint config to include following, it should work (be sure to use the latest version of eslint-config-next. (The Next.js config includes the eslint plugin you'll need)

 extends: [
    "airbnb-typescript-prettier",
    "next",
  ],

Else you can just install the required plugin: https://github.com/import-js/eslint-import-resolver-typescript

Let me know if it works! :)

[Hearmstrong]

@tobiaslins Would this be the same process in a non-typescript project?

[timolins]

@Hearmstrong It might not be required. There is a JavaScript version as well: https://www.npmjs.com/package/eslint-plugin-import

Note that I haven't tested this out.

[tobiaslins]

Will close this for now. Let us know if you still have problems!

[gsheppard]

I have the next configuration for eslint, but I am still seeing this issue.

extends: [
  'next/core-web-vitals',
  'plugin:@typescript-eslint/recommended',
  'airbnb-base',
  'airbnb-typescript',
  'next',
  'prettier',
],

Admittedly a lot of this config is old and haven't audited it in a while. Nor sure if there are any conflicts happening.

[elijahcarrel]

Thank you so much @tobiaslins! That was exactly my problem and your solution worked. I'm surprised I managed to get this far in my app without actually using eslint-import-resolver-typescript until now 😅.