Import assignment cannot be used when targeting ECMAScript modules

avatar

Borislav Hadzhiev

Last updated: Mar 24, 2022

banner

Photo from Unsplash

Import assignment cannot be used when targeting ECMAScript modules #

To solve the error "Import assignment cannot be used when targeting ECMAScript modules", set the module option to commonjs in your tsconfig.json file or import the entire module into a single variable with import * as someGlobals from './my-file'.

import assignment cannot be used

Here is an example of how the error occurs.

index.ts
// ⛔️ Error: Import assignment cannot be used when targeting ECMAScript modules. // Consider using 'import * as ns from "mod"', 'import {a} from "mod"', // 'import d from "mod"', or another module format instead.ts(1202) import doMath = require('./another-file'); console.log(doMath.sum(30, 20));

The contents of another-file.ts look like:

another-file.ts
export function sum(a: number, b: number) { return a + b; }

To solve the error, set the module option to commonjs in your tsconfig.json file.

Note that this may also be your tsconfig.app.json file if using Angular, or whichever config file is used in your build process.

tsconfig.json
{ "compilerOptions": { "module": "commonjs", // ... your other options... } }

The module option sets the module system for the project.

We needed to change it to Commonjs because we aren't allowed to use import assignment when targeting ECMAScript modules.

Make sure to restart your development server after making the change.

Now you will be able to use import assignments in your project.

index.ts
import doMath = require('./another-file'); console.log(doMath.sum(30, 20)); // 👉️ 50

An alternative solution is to import the entire module into a single variable and use it to access the module exports.

index.ts
import * as doMath from './another-file'; console.log(doMath.sum(30, 20));

This is the ES6 Modules way of importing an entire module to access its exports.

You can also import individual exports by using default or named imports. Here is a file that has a default export and a named export.

another-file.ts
function sum(a: number, b: number) { return a + b; } // 👇️ default export export default sum; // 👇️ named export export const num = 100;

And this is how we would import the default export and the named export.

index.ts
// 👇️ default and named imports import sum, { num } from './another-file'; console.log(sum(num, num)); // 👉️ 200

We used a default import to import the sum function and a named import to import the num variable.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

In my experience, most real-world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for autocompletion and auto-imports.

You also don't have to think about which members are exported with default or named export.

Conclusion #

To solve the error "Import assignment cannot be used when targeting ECMAScript modules", set the module option to commonjs in your tsconfig.json file or import the entire module into a single variable with import * as someGlobals from './my-file'.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.