Module not found: Error: Can't resolve 'lodash-es'

Question

In my Angular 8 TypeScript code I was importing lodash directy (e.g. import * as _ from 'lodash';). In my package.json I had "lodash": "^4.17.15".

I decided to install the @types/lodash-es module and import the specific lodash functions that way (e.g. import { map } from 'lodash-es';). It is better because it saves runtime space and also uses the standard Angular/TypeScript import mechanism.

However, now when I run a build I am getting this error:

Module not found: Error: Can't resolve 'lodash-es'

How can I fix this error?

Hubblebubble

Answer 1

In addition to installing the @types/lodash-es module, the existing "lodash": "^4.17.15" module needs to be replaced with "lodash-es": "^4.17.15"

This is because @types/lodash-es requires lodash-es and not lodash. This is obvious once you know it but I missed it originally.

Hubblebubble

For any time travelers this also works with other libs such as lodash.clone and whatever additions have been made since now. Also, we need food, water, top 3 stock picks, and a new flux capacitor. – Lore

Answer 2

Try this

npm install @types/lodash-es --save-dev

If after this you will have the same problem please check the package.json that you have in dependencies

"lodash-es": "^4.17.20"

when you dont have, just write and run npm install in cmd . This work for me.

Vermifuge

Answer 3

you can update your node__modules by npm update. It has removed the error for my case.

Magdalen

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sherard

Answer 4

If you are using Formik together with Webpack and encounter a problem, configuring resolve.extensions in your Webpack configuration might help. Here is an example of how you can do this: By adding the desired file extensions .js to resolve.extensions, Webpack will ensure that these file types are resolved correctly during bundling. This can be especially useful if you are using Formik in a React application written in TypeScript.

Keheley