How To Fix “Cannot use import statement outside a module” In TypeScript

When you try to use modules in Node.js with TypeScript for the first time, you may see the error “Cannot use import statement outside a module”. Check out the root cause and solution for it below.

Reproduce the error “Cannot use import statement outside a module”

Suppose we have this module called greeter.ts in a typical Node.js package, which prints a welcome message for visitors depending on the site name:

greeter.ts:

export function greeter(sitename: string) {
	console.log('Welcome to', sitename);
}

After exporting the function greeter(), you can import it into the main module index.ts:

index.ts:

import { greeter } from "./greeter";
greeter("LearnShareIT");

Everything looks fine, and the compiler should compile your TypeScript into JavaScript code without issues. However, when you build the project, it actually throws errors:

$ npx tsc
import { Greeter } from "./greater";
^^^^^^
SyntaxError: Cannot use import statement outside a module

You will also run into the same problem when trying to execute the index.ts file directly with node:

$ node src/index.ts
SyntaxError: Cannot use import statement outside a module

Causes and solutions

Set the module system to CommonJS

TypeScript supports modules, just like JavaScript, since the ECMAScript2015 (ES6) standard. It treats any file with a top-level export or import as a module. Meanwhile, files without them are considered scripts whose contents belong to the global scope.

To use a module (such as greeter.ts above), you need a module loader. Its job is to locate and execute all dependencies that the module needs so it can execute successfully.

The creator of JavaScript didn’t design this programming language with modules in mind from the outset. In the beginning, it was created to bring simple scripting capabilities to websites. Not until much later that modularity has been implemented into JavaScript (and therefore TypeScript).

This effort suffers from fragmentation to a certain extent. Started by a Mozilla engineer in 2009, CommonJS is a popular module system.

Node.js originally used it as the official way to package JavaScript code before it supported the ECMAScript modules standard. On top of that, there are several third-party frameworks and libraries that allow for module usage, including AMD, SystemJS, UMD, etc.

If you write your Node.js in TypeScript, you can use a syntax similar to that of ECMAScript to export or import modules. When you compile your code into JavaScript, you can set the module loader you want to target in the tsconfig.json configuration file.

It may look like this:

{
    "compilerOptions": {
        "target": "ES6",
        "lib": [
        	"ES6"
        ],
        "module": "ES2015",
        "rootDir": "src",
        "resolveJsonModule": true
    }
} 

The "module" property in this configuration sets which module code you want to output from your TypeScript project. In this example, it’s the ECMAScript standard, which is not immediately supported by Node.js. That is why you see the error “Cannot use import statement outside a module”.

You can change the module loader to CommonJS to fix this error. Edit the tsconfig.json file at the root of your project:

"module": "CommonJS",

You can now compile and execute your code without trouble:

$ npx tsc && node build/index.js
Welcome to LearnShareIT

Compile before running your code

You need to compile your TypeScript code (into JavaScript) first and execute the output instead of running it directly. Node.js is a JavaScript runtime, meaning it can parse and execute .js files outside browsers. It is meant for running .ts files.

Use tsc (or npx tsc in your Node.js project) to compile your TypeScript code:

$ npx tsc && node build/index.js
Welcome to LearnShareIT

Summary

The “Cannot use import statement outside a module” error is the result when you use node to run a .ts file directly without compiling it or when the module system of your Node.js project has been set to anything other than CommonJS. To resolve the problem, edit the tsconfig.json file and set "module" property in "compilerOptions" to "CommonJS". Finally, compile your TypeScript code before executing it.

Maybe you are interested:

• Property ‘#’ does not exist on type ‘EventTarget’ in TS
• Cannot invoke an object which is possibly ‘undefined’ in TS

Robert Charles

My name is Robert. I have a degree in information technology and two years of expertise in software development. I’ve come to offer my understanding on programming languages. I hope you find my articles interesting.

---

Job: Developer
Name of the university: HUST
Major: IT
Programming Languages: Java, C#, C, Javascript, R, Typescript, ReactJs, Laravel, SQL, Python