Webpack 'Module not found' after npm update — fix

So you ran npm update (or maybe just npm install on a freshly cloned repo), and now Webpack throws this at you:

Module not found: Error: Can't resolve 'some-package' in '/path/to/your/project/src'

I know that error stings. It usually pops up right when you're about to push a fix or build for production. You didn't change any code, just updated packages. What gives?

Why this happens

Here's the short version: npm update rewrites package-lock.json. Sometimes it changes the version of a package your code depends on — or worse, it removes a nested dependency that another package used. Webpack then can't find the module because it's literally not in node_modules anymore.

I've seen this most often on Windows 10 with npm 8 or 9, but it happens everywhere. The trigger is almost always a patch update of an indirect dependency (like a babel plugin or a style loader).

The fix (3 steps)

Skip the rm -rf node_modules dance for a moment. Try this first:

Step 1: Check the exact missing module

Look at the error message carefully. It says something like Can't resolve 'lodash.merge'. Write down that name. Now open your node_modules folder and see if it's there. If not, you've found the problem. If it is there, move to step 3 — the issue is likely a version mismatch or missing package.json entry in that module.

Step 2: Reinstall the missing package manually

If the module is missing, just install it. For example:

npm install lodash.merge --save-dev

But wait — is it a runtime dependency? Then use --save (no dev). Most of the time these missing modules are dev dependencies (loaders, plugins). If you're unsure, check the original package's docs. I've seen css-loader drop icss-utils after an update, and reinstalling fixed it.

Step 3: If the module IS in node_modules but Webpack still can't find it

This happens when the module's package.json's main field points to a file that doesn't exist, or the module uses exports in a way Webpack 4 can't handle. The fix: add a resolve.alias in your Webpack config.

// webpack.config.js
resolve: {
  alias: {
    'some-package': path.resolve(__dirname, 'node_modules/some-package/dist/index.js')
  }
}

You'll need to find the correct entry file inside the package folder. Look for main in its package.json and point to that file (or index.js if missing). This saved me when graphql-tag broke after an update.

What to check if it still fails

If the above didn't work, don't go nuclear yet. Check these:

• Are you using an older Webpack version (4 or below)? Some newer npm packages dropped support for them. You might need to pin the package version: npm install some-package@1.2.3 --save-dev (replace with the last version that worked).
• Check your package-lock.json for duplicate entries. Open it in a text editor (it's big, but Ctrl+F helps). Search for the missing module name. If you see two different versions listed, npm might have flattened one and removed the other. Delete node_modules and package-lock.json, then run npm install fresh.
• Did you update Node.js too? I've seen Node 18 break Webpack 4 builds because of OpenSSL changes. If you're on Node 17+, set this env variable: NODE_OPTIONS=--openssl-legacy-provider.
• Check for stray .gitignore entries. If someone added a pattern like **/node_modules in a subfolder, that could cause issues only on certain OSes (looking at you, Linux and case sensitivity).

If none of that helps, post the full error trace and your package.json dependencies in a comment below. I'll help you figure it out.

One last thing: after you fix it, run npm ci instead of npm install for clean builds. It uses package-lock.json exactly and won't surprise you with version changes.