title: eslint + jsconfig + nextjs module path aliases (absolue path import - @)
body: <p>I am trying to import the files using custom aliases following the <a href="https://nextjs.org/docs/advanced-features/module-path-aliases" rel="noreferrer">nextjs documentation</a>.</p>
  <p>My current approach is</p>
  <p>from</p>
  <pre><code>import Header from '../../../components/Header';
  </code></pre>
  <p>to</p>
  <pre><code>import Header from '@components/Header';
  </code></pre>
  <p>I am getting the expected result. But eslint throws the following error:</p>
  <ul>
  <li>unable to resolve path to module (eslint - import/no unresolved)</li>
  </ul>
  <p>And I have tried adding the following line in my eslintrc file to resolve the error</p>
  <pre><code>    settings: {
      'import/resolver': {
        node: {
          paths: ['src'],
        },
      },
    },
  </code></pre>
  <p>But still the eslint throws the same error.</p>
  <p>What is the correct approach to resolve this one?</p>
  <p>Thanks in advance...</p>
  <p>Note: I don't want to remove eslint and I need @components import aliases</p>