title: ESLint not able to detect certain modules while using `webpack` as `import/resolver`
body: <p>I'm using Webpack in my project as well as ESLint. I've installed <code>eslint-plugin-import</code> and <code>eslint-import-resolver-webpack</code> to help ESLint understand some <code>resolve.aliases</code> used in the project (As is alluded to <a href="https://github.com/import-js/eslint-plugin-import/blob/main/README.md#resolvers" rel="nofollow noreferrer">here</a>). I'm also using <code>react-hook-form</code> as well as <code>react</code>.</p>
  <p>The issue is when I try to <a href="https://github.com/nishnat-rishi/min-repro/blob/684b301d96c4015001c013006270f1d91207f172/src/index.js#L2" rel="nofollow noreferrer">import</a> <code>react-hook-form</code>, ESLint tells me it's <code>Unable to resolve path to module 'react-hook-form'. eslint(import/no-unresolved)</code>. This doesn't happen with <code>react</code>. Here's a minimum, reproducible example (<a href="https://github.com/nishnat-rishi/min-repro" rel="nofollow noreferrer">https://github.com/nishnat-rishi/min-repro</a>).</p>
  <p>In my actual project, the problematic <code>node_modules</code> are:</p>
  <ul>
  <li><code>react-hook-form</code></li>
  <li><code>@headlessui/react</code></li>
  </ul>
  <p>and the working ones are:</p>
  <ul>
  <li><code>@heroicons/react</code></li>
  <li><code>react</code></li>
  <li><code>react-dom</code></li>
  <li><code>react-router-dom</code></li>
  </ul>
  <p>I've already tried:</p>
  <ul>
  <li>Adding <code>{... resolve: { modules: [&quot;node_modules&quot;] } ... }</code> in <code>webpack.config.js</code>. Nothing changes with this, same error. I've also tried the following variants:
  <pre><code>... modules: [path.resolve(__dirname, &quot;node_modules&quot;)]
  ... modules: [path.resolve(__dirname)]
  </code></pre>
  </li>
  <li>Adding <code>{... resolve: { mainFields: [&quot;browser&quot;, &quot;module&quot;, &quot;main&quot;] } ... }</code> in <code>webpack.config.js</code>. Nothing changes with this, same error. I also shifted around the three <code>mainFields</code> entries to no avail.</li>
  </ul>
  <p>What am I missing / getting wrong?</p>
  <p>EDIT: I needed to use both resolvers in my <code>.eslintrc</code>:</p>
  <pre><code>&quot;import/resolver&quot;: {
    &quot;node&quot;: {},
    &quot;webpack&quot;: {}
  }
  </code></pre>