Lodash - '_' refers to a UMD global and lodash.js is not a module errors

Question

If I do nothing and add the type definition it works for jquery but lodash gets a

'_' referes to a UMD global, but the current file is a module. Consider adding an import instead.

If I try to import lodash with any combination of import call, I get

lodash.js is not a module

I tried to get help by asking a question here and it was closed because there was another answer for Angular (Angular 2). I really need a real answer so I'm re-posting with my own solutions, hoping someone will eventually help me understand this problem.

In this case I am:

Not using any frameworks like Angular
Using TypeScript
Using requirejs to import modules
Using Visual Studio
Using MVC5

score 13 · Answer 1 · edited Feb 19 '19 at 14:51

13

I use import * as _ from 'lodash'; in my working file after installing lodash.

edited Feb 19 '19 at 14:51

Dan

1,130
2
20
38

answered Feb 18 '19 at 09:25

Nizam Khan

207
2
3

This can not be an answer. Please insert it as a comment. – dpapadopoulos Feb 18 '19 at 09:46
1

@dpap Looks fine to me as an answer, and works in TS. – Dan Feb 19 '19 at 14:39
Uh huh... This answer results in 'lodash.js is not a module' as outlined in the second sentence of the question. So this answer doesn't help at all. If "import * as _ from 'lodash'" was the answer I wouldn't have had any trouble and this question wouldn't exist. "import * as _ from 'lodash'" will never work if your @typings file is incompatible with your framework. The accepted answer, which came earlier, addressed the issue. However, since this post I have refused to work outside major frameworks because there isn't much support... – AndrewBenjamin Mar 15 '19 at 18:09
Worked for me as well. If this is somehow "bad", I'd like to hear why, and the proper way of dealing with global imports in combination with TS. – svenema Feb 17 '22 at 11:45

Dieter Gribnitz · Answer 2 · 2020-03-12T10:03:53.090

None of the other answers worked for me. Here is how I solved it.

With this method you will be able to load lodash from the global include

You will also have critically important type hinting without having to build lodash into your webpack bundle

Lodash will now be accessible globally in all your ts files without needing to import it

Here is my setup.

HTML

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
</head>

NPM

npm i @types/lodash lodash --save-dev

Webpack

externals: {
    _: 'lodash'
}

global.d.ts

import _ from 'lodash';
declare global {
    const _: typeof _;
}

tsconfig.json

"types": [
    "lodash"
],

entry.ts

console.log(_.VERSION)

This method will speed up the time it takes to compile bundles. Reduce your build size and in turn reducing the download size to the client after each build and allow the client to use the cached library from the CDN which they may already have in memory from previous builds, other pages or other sites.

This is the answer that worked for me. – Robin Zimmermann Nov 02 '21 at 04:25 — Robin Zimmermann, Nov 02 '21 at 04:25

score 9 · Accepted Answer · answered Mar 09 '18 at 17:45

9

I added following code in my global typing definition file (~\src\typings.d.ts) to fix the problem. I'm using Angular CLI 1.7

// lodash global typing - begin
declare namespace _ {
}
// lodash global typing - end

answered Mar 09 '18 at 17:45

Feng

397
3
6

2

This isn't really a solution, more of a hacky workaround and defeats the purpose of TS – Emobe Feb 25 '19 at 17:32
when I try to compile this `_.union([1], [2, 3]);` I got: `Cannot use namespace '_' as a value.` – Max Mar 23 '19 at 14:27

score 8 · Answer 4 · answered Mar 23 '19 at 14:49

8

I added in my ~\src\typings.d.ts :

declare const _;

It works for me. See also

answered Mar 23 '19 at 14:49

Max

853
1
10
18

score 1 · Answer 5 · answered Jun 15 '20 at 06:39

1

There's a compiler option for allowing this if you know it's safe:

--allowUmdGlobalAccess Allow accessing UMD globals from modules.

answered Jun 15 '20 at 06:39

LukeGT

2,324
1
21
20

AndrewBenjamin · Answer 6 · 2019-03-25T21:08:31.180

0

'_' referes to a UMD global, but the current file is a module. Consider adding an import instead.

This is caused by the type definition. Go into your @types/lodash file and delete these lines:

export = _;
export as namespace _;

This will solve the error.

***EDIT****

Removing the export statements above will cause another error if you have any global declarations in your type definition file, for example, like this:

declare global { }

To solve this, either move the properties from the global declaration to the interfaces that reference them - or delete them entirely and change the types of the references to something generic. I'm not sure which solution will make a better final compilation but the former has not caused any problems in my application as far back as IE11.

edited Mar 25 '19 at 21:08

answered Dec 07 '17 at 21:40

AndrewBenjamin

651
1
7
16

This is just tinkering around without any care. – MattSom Nov 04 '21 at 15:56
@MattSom in retrospect, yes. I didn't know what I was doing. You realize I'm the one who asked the question right? – AndrewBenjamin Nov 04 '21 at 19:00

score 0 · Answer 7 · answered Dec 14 '22 at 12:25

0

I was facing the same error while using loadash in my react application. What I was doing wrong is _.uniqWith() .

then I just removed underscore and dot and used it as uniqWith().

This resolved my error

import { uniqWith } from loadash;

answered Dec 14 '22 at 12:25

Mohammad Noushad Siddiqui

21
4

score 0 · Answer 8 · answered Jun 11 '23 at 04:02

0

In declarations.d.ts:

import type { LoDashStatic } from 'lodash';

declare global {
  const _: LoDashStatic;
}

answered Jun 11 '23 at 04:02

Anton Liannoi

543
5
13

Lodash - '_' refers to a UMD global and lodash.js is not a module errors

8 Answers8

Linked