ESLint not able to detect certain modules while using `webpack` as `import/resolver`

Question

I'm using Webpack in my project as well as ESLint. I've installed eslint-plugin-import and eslint-import-resolver-webpack to help ESLint understand some resolve.aliases used in the project (As is alluded to [here][1]). I'm also using react-hook-form as well as react.

The issue is when I try to [import][2] react-hook-form, ESLint tells me it's Unable to resolve path to module 'react-hook-form'. eslint(import/no-unresolved). This doesn't happen with react. Here's a minimum, reproducible example (https://github.com/nishnat-rishi/min-repro).

In my actual project, the problematic node_modules are:

• react-hook-form
• @headlessui/react

and the working ones are:

• @heroicons/react
• react
• react-dom
• react-router-dom

I've already tried:

• Adding {... resolve: { modules: ["node_modules"] } ... } in webpack.config.js. Nothing changes with this, same error. I've also tried the following variants:

  ... modules: [path.resolve(__dirname, "node_modules")]
  ... modules: [path.resolve(__dirname)]
  

• Adding {... resolve: { mainFields: ["browser", "module", "main"] } ... } in webpack.config.js. Nothing changes with this, same error. I also shifted around the three mainFields entries to no avail.

What am I missing / getting wrong?

Answer 1

I needed to use both resolvers in my .eslintrc:

"import/resolver": {
  "node": {},
  "webpack": {}
}