Webpack suddenly fails to compile due to "Module not found: Error: Can't resolve" errors

It's an issue with the Webpack or Jest configuration.

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (i.e. ./node_modules, ../node_modules, and on).

With an absolute path, it will only search in the given directory.

webpack.config.js

module.exports = {  //...  resolve: {    modules: ['node_modules']  }};

Use relative path for node_modules

I had this issue and solved by fixing my modules resolution settings in Jest.

With the current state of things, my package-lock includes:

"array.prototype.find": {  "version": "2.1.0",  "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",  "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",  "requires": {    "define-properties": "^1.1.3",    "es-abstract": "^1.13.0"  }},

and

"array-includes": {  "version": "3.1.0",  "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.0.tgz",  "integrity": "sha512-ONOEQoKrvXPKk7Su92Co0YMqYO32FfqJTzkKU9u2UpIXyYZIzLSvpdg4AwvSw4mSUW0czu6inK+zby6Oj6gDjQ==",  "dev": true,  "requires": {    "define-properties": "^1.1.3",    "es-abstract": "^1.17.0-next.0"  },  "dependencies": {    "es-abstract": {      "version": "1.17.0-next.1",      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0-next.1.tgz",...

This caused me to have es-abstract 1.16.3 installed in my root node_modules and 1.17.0-next.1 as a subdependency of array-includes (among others).

Having changed my Jest moduleDirectories config made my root node_modules the first lookup place. This is what Jest docs say about this option: An array of directory names to be searched recursively up and Setting this option will override the default, which happens to be node_modules.

so check your configuration for this feature:

• https://jestjs.io/docs/en/configuration#moduledirectories-arraystring for jest
• https://webpack.js.org/configuration/resolve/ for webpack.

I created an issue on the maintainers github repository https://github.com/ljharb/es-abstract/issues/84#issuecomment-567422831

Since we are encountering the exact same issue we went with an idea that was described by a comment. Running the webpack development build under productionflag. For us all source-map entries are kept and our development app is fully debugable. So we use that as a workaround.

If that ever breaks in future we will probably fork all the repositories that went with a semver range dependency and host it ourselves for our really outdated legacy repos.