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

[gautierrollin]

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 git@github.com: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...

[YannickDa]

I've got the same issue with other packages.

I use react-hook-form on 3 differents files of my project and I got this error for one of then. 😲

With webpack@4, no issues.

[YannickDa]

Temporary fix is add alias to webpack config:

resolve: {
  alias: {
    "apollo-upload-client": path.resolve(__dirname, "..", "node_modules", "apollo-upload-client"),
    "react-hook-form": path.resolve(__dirname, "..", "node_modules", "react-hook-form"),
  },
}

[ljharb]

webpack 5 unfortunately breaks the ecosystem; you'll need to use ProvidePlugin to ensure it shims node core modules when possible.

I'm not sure if that's the issue here; perhaps the webpack resolver needs updating for webpack 5.

[Cherry]

This appears to impact modules that use the new exports syntax in their package.json. For example, the latest release of vuex (3.6.0) exhibits the same issue reported here after they added this: vuejs/vuex@acddab2. The previous version (3.5.1) does not exhibit this issue.

Adding the following to our webpack config did resolve the import/no-unresolved issue, but isn't a long-term solution as more packages start to support the newer exports syntax.

resolve: {
	alias: {
		'vuex$': 'vuex/dist/vuex.mjs'
	}
}

[ljharb]

@Cherry hm, the node resolver uses resolve, which doesn't support exports yet, so what i might expect is that webpack can't find it but eslint can. Are you using the node resolver?

[Cherry]

@ljharb Thanks for the update! Webpack builds just fine and can read the exports - the only issue is that import/no-unresolved reports a false-positive. My ESLint config looks like this:

"settings": {
	"import/resolver": {
		"webpack": {
			"config": path.resolve(__dirname, '../webpack/config.base.js')
		}
	}
}

[ljharb]

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

[Cherry]

That does appear to have resolved my issue, and should solve @Gautierrr's issue too when tweaking the .eslintrc.js. Thanks @ljharb.

[gautierrollin]

Yes thanks it solves my issue but I don't understand why we have to add the node resolver.
Since the Webpack build works fine, the webpack resolver should be enough, isn't it? 🤔

[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.

[gautierrollin]

Understood, thanks @ljharb!

[rtymchyk]

Ran into this with react-hook-form for anyone upgrading to Webpack 5.