Manoj Shrestha
Manoj Shrestha

Reputation: 4684

error TS1192: Module @types/lodash/index has no default export

I'm using Angular 6.x.x in my project with the following lodash dependency.

  "dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    ...
    "@types/lodash": "^4.14.114",
    ...
  },

Both of the following import are not working for me.

import _ from 'lodash';  

import * as _ from 'lodash';

Upvotes: 2

Views: 4624

Answers (3)

kavare
kavare

Reputation: 1806

Brief

The solution is to:

  1. Add {"esModuleInterop": true} to your .tsconfig
  2. Make sure you have installed "@types/lodash"in your devDependencies

Reasoning

In short: Typescript has a different default import mechanism compare to ES6 default.

For examples, you can import a function from a module either by:

  1. Import as a whole:

    import _ from 'lodash';
    const results = _.uniq([1, 1, 2, 3]);
    
  2. Import just a part:

    import {uniq} from 'lodash';
    const results = _.uniq([1, 1, 2, 3]);
    

However, in Typescript it gives you some syntax sugar for 2. Import a part, which looks like this:

// This is valid in Typescript
import uniq from 'lodash';
const results = _.uniq([1, 1, 2, 3]);

Which is nice but makes 1 Import as a whole not inferrable. By adding esModuleInterop it can make the default ES6 behavior work again.

More details was mentioned here in another thread: Is there a way to use --esModuleInterop in tsconfig as opposed to it being a flag?

Upvotes: 3

Manoj Shrestha
Manoj Shrestha

Reputation: 4684

It seems like the following import was working perfectly fine. I had issues with my environment. After deleting the node_modules directory and installing it, it worked.

import * as _ from 'lodash';

Upvotes: 6

Ben Smith
Ben Smith

Reputation: 20230

You need to install the lodash library.

"@types/lodash" are the lodash type definitions which are required to use lodash with typescript.

To install lodash run:

npm i --save lodash

in a terminal.

Upvotes: 1

Related Questions