TypeScript: Cannot use import statement outside a module

Have you ever encountered the error “Cannot use import statement outside a module” when working with TypeScript? If so, you’re not alone. This error can be caused by a variety of issues, but there are a few common solutions that can help resolve it.

Setting the module option to commonjs in tsconfig.json

One of the most common causes of the “Cannot use import statement outside a module” error is an incorrect configuration of the ‘module ‘option in the ‘tsconfig.json’ file. To fix this issue, make sure that the ‘module’ option is set to ‘commonjs’:

{  "compilerOptions": {    "target": "es6",    "module": "commonjs",    "esModuleInterop": true,    // ... your other options  }}

It’s also a good idea to set the ‘esModuleInterop ‘option to ‘true’, as this can help resolve issues with CommonJS modules being treated differently than ES6 modules.

[Fixed] Cannot read property ‘includes’ of Undefined in JavaScript

Running TypeScript files with node

Another common cause of the “Cannot use import statement outside a module” error is attempting to run a TypeScript file directly with ‘node’, like this:

node src/index.ts

This doesn’t work because TypeScript files need to be transpiled to JavaScript before they can be run with ‘node’. Make sure that you are transpiling your TypeScript files to JavaScript before running them.

Incorrect TypeScript project configuration

If you are using tools like babel or ts-node in your TypeScript project, make sure that they are configured correctly. Specifically, check that your build directory only contains JavaScript files, and that the ‘main’ property in your ‘package.json’ file points to your ‘index.js’ file, not your ‘index.ts’ file.

Here is an example ‘tsconfig.json’ file for a project that uses ‘ts-node’:

{  "compilerOptions": {    "skipLibCheck": true,    "target": "es6",    "module": "commonjs",    "moduleResolution": "node",    "allowJs": true,    "resolveJsonModule": true,    "esModuleInterop": true,    "outDir": "./build",    "rootDir": "src",  },  "include": ["src/**/*"],  "exclude": ["node_modules"]}

And here is an example ‘package.json’ file:

{  "name": "example",  "version": "1.0.0",  "main": "build/index.js",  "scripts": {    "build": "rimraf ./build && tsc",    "dev": "nodemon",    "start": "npm run build && node build/index.js",  },  "devDependencies": {    "@types/node": "^17.0.21",    "nodemon": "^2.0.15",    "rimraf": "^3.0.0",    "ts-node": "^10.4.0",    "typescript": "^4.6.2"  }}

Additional considerations

There are a few other things you may want to check if you’re still experiencing the “Cannot use import statement outside a module” error:

• Make sure the ‘include’ array in your ‘tsconfig.json’ file points to a directory that contains all of the necessary files for your project.
• Check your ‘nodemon.json’ configuration file (if applicable) to ensure that it is correctly set up to watch for changes in your ‘src’ directory and execute the correct script.
• Take a look at the build directory, which you’ve set via the ‘outDir’ option in your ‘tsconfig.json’ file. Your configuration could be incorrect, and you may still be producing TypeScript files in your build directory.

Conclusion

The “Cannot use import statement outside a module” error can be a frustrating one to deal with, but with a bit of troubleshooting and the right configuration, it can be easily resolved.

By setting the ‘module’ option to ‘commonjs’ in your ‘tsconfig.json’ file, making sure to transpile your TypeScript files before running them with node, and double-checking your project configuration, you should be able to get your TypeScript project up and running smoothly.