To resolve the import/no-unresolved ESLint error for module paths in Next.js, you need to configure the ESLint settings properly. By default, ESLint doesn't recognize module aliases set in Next.js's jsconfig.json or tsconfig.json file.

To fix this issue, you can use the eslint-import-resolver-next package. This resolver allows ESLint to recognize the module paths defined in Next.js projects.

Here's how you can set it up:

  1. Install the required packages:
npm install eslint-import-resolver-next --save-dev
  1. Modify your .eslintrc.js (or .eslintrc.json) configuration file:
{ "settings": { "import/resolver": { "next": { "extensions": [".js", ".jsx", ".ts", ".tsx"] } } }, "plugins": ["import"], "rules": { "import/no-unresolved": [2, { "commonjs": true }] } }

In this configuration:

  • We specify the eslint-import-resolver-next as the resolver for the import/resolver setting. This allows ESLint to recognize Next.js's module paths.
  • The "commonjs": true option in the import/no-unresolved rule allows ESLint to resolve module aliases defined in Next.js projects.

By setting up the ESLint configuration like this, you should no longer see the import/no-unresolved error for module paths in your Next.js project. Instead, ESLint will be able to correctly resolve the aliases specified in your jsconfig.json or tsconfig.json file.

Have questions or queries?
Get in Touch