Import assignment cannot be used when targeting ECMAScript 2015 modules

Question

I'm trying to use the follwing line:

import Clipboard = require('clipboard');

and I get the following error:

   [default] c:\xampp\htdocs\isitperfect\node_modules\angular2-clipboard\src\clipboard.directive.ts:2:0 
Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

The error is in this line:

import Clipboard = require('clipboard');

I tried:

import * as Clipboard from 'clipboard';

and some other variations but couldn't figure out how to fix it.

I'm using typescript 2.0.0

Any ideas?

score 52 · Answer 1 · edited Apr 12 '18 at 09:58

52

I was facing the same issue as you.

In the tsconfig.json file I replaced:

"module": "es6"

with

"module": "commonjs"

and restarted the terminal. It worked.

edited Apr 12 '18 at 09:58

Tsvetan Ganev

8,246
4
26
43

answered Nov 22 '16 at 08:59

Shashikant Pandit

2,752
22
29

5

worked, but in my `tsconfig.app.json` file instead of `tsconfig.json` – Pipo Jan 01 '19 at 11:27
^^^ tsconfig.app.json was the fix for me too. – Will Strohl Sep 14 '20 at 20:24

score 12 · Answer 2 · edited Jan 01 '19 at 11:48

12

I had the same problem and changing to:

import * as myGlobals from "../globals";

fixed the problem. globals.ts file is in the main app folder, and I'm loading it up from subfolder services.

edited Jan 01 '19 at 11:48

Pipo

4,653
38
47

answered Oct 04 '16 at 08:07

KrystianC

422
3
13

2

This is not the same case – TheUnreal Oct 05 '16 at 15:51
2

I know that's not the same case but I found your post because I had exactly the same error as you. And fixed that using line of code that I gave you with syntax: import * as "name" from "path". Hoped that might help you. – KrystianC Oct 07 '16 at 07:55
Example: import * as signalR from '@aspnet/signalr'; – aswininayak May 10 '19 at 03:03

score 6 · Answer 3 · answered May 26 '17 at 08:58

6

In case you are using Angular CLI: I was able to compile my project after I had set the value of module to es2016 in the file src/tsconfig.app.json.

answered May 26 '17 at 08:58

Leukipp

550
2
9
25

2

es2016 does not seem to be a valid value for the module field. https://www.typescriptlang.org/docs/handbook/compiler-options.html – Lyn Headley Oct 12 '17 at 18:55
it's `lib`, and not `module` – dev27 May 10 '18 at 22:41
1

TypeScript gave me into trouble for using `es2016` as the module setting, but suggested `esnext` as an alternative and now it is happy. – Eraph Jun 26 '18 at 23:12

score 2 · Answer 4 · answered Dec 17 '19 at 08:54

2

I used default member of imported function.

import {default as Clipboard} from 'clipboard';

answered Dec 17 '19 at 08:54

Pankaj Parkar

134,766
23
234
299

score 1 · Answer 5 · answered Oct 05 '16 at 17:13

1

Try to set module as commonjs in tsconfig

You can try this example using webpack here

answered Oct 05 '16 at 17:13

maxisam

21,975
9
75
84

1

disclaimer: I don't maintain the webpack solution anymore. But I have updated the broken link for you – maxisam Jan 01 '19 at 17:03

score 0 · Answer 6 · edited Apr 03 '19 at 07:41

0

I had the same problem after updating my vsCode.

just replace with "module": "es5"

to "module": "commonjs" in tsconfig.app.json

edited Apr 03 '19 at 07:41

rcanpahali

2,565
2
21
37

answered Apr 03 '19 at 04:48

Tauseef Ahmed

1
1

score 0 · Answer 7 · answered Jan 08 '21 at 14:00

Similar to KristianC, I got this warning for lodash on upgrade to Angular 11

const cloneDeep = require('lodash-es/cloneDeep');

"Import assignment cannot be used when targeting ECMAScript modules."

Warning resolved on updating "require" to "import"

import { cloneDeep } from 'lodash-es';

Import assignment cannot be used when targeting ECMAScript 2015 modules

7 Answers7

Linked