Unable to resolve path to module 'nanoid' since Webpack 5

Hi ✋

Since the update of Webpack from v4.44.2 to v5.6.0, I get this error:

error  Unable to resolve path to module 'nanoid'  import/no-unresolved

It’s a very strange bug because it doesn’t happen with all Node modules. For example, here the import/no-unresolved rule throw an error for nanoid but not for bowser 🤔

The minimal reproducible repo: https://github.com/gautierrollin/no-unresolved-false-positive or just:

git clone [e-mail]:Gautierrr/no-unresolved-false-positive.git
npm install
npm run lint

You can downgrade the Webpack version to make it work:

npm install webpack@4.44.2 webpack-cli@3.3.12 && npm run lint

My (minimal) eslint config:

module.exports = {
  env : {
    browser : true,
    es2021 : true
  },

  parserOptions : {
    ecmaVersion : 12,
    sourceType : "module"
  },

  plugins : [
    "import"
  ],

  rules : {
    "import/no-unresolved" : ["error"]
  },

  settings : {
    "import/resolver" : "webpack"
  }
};

Ps: my real Webpack config is bigger than the one in the reproducible repo. But it’s just a minimal reproducible repo, I get the same error with resolve.extensions option and others…

[ljharb]

You’re missing the node resolver. Add "node": {} before “webpack”.

[ljharb]

@Gautierrr generally you only want the node resolver, unless you have webpack-specific aliases (and in that case, i’d suggest using babel to resolve them instead of webpack). You are right tho that the webpack resolver alone should theoretically be enough (although I’ve never omitted the node resolver in any project before) - however, it’s entirely possible that webpack 5 (or enhanced-require) has broken something that used to work in webpack 4, or, that nanoid’s use of the “exports” field is causing issues.

We use resolve, which does not yet have support for the “exports” field - I suspect once we add that support, that this problem would go away.