Understanding and Resolving ‘exports is not defined’ in TypeScript

The error "ReferenceError: exports is not defined" in TypeScript often arises when working with modules, particularly when the TypeScript compiler is configured to use a module system that relies on the exports object. This tutorial explains the root cause of this error and provides solutions to address it.

What is the `exports` Object?

In older JavaScript module systems like CommonJS (often used in Node.js), the exports object serves as a container for the values you want to make available to other modules. You assign properties to exports to export functions, classes, or variables.

However, modern JavaScript (ES6 and beyond) has adopted a different module system that uses export and import keywords. These keywords provide a more explicit and standardized way to manage module dependencies.

Why does the Error Occur?

The “exports is not defined” error usually occurs when:

Incorrect Module Configuration: Your tsconfig.json file might be configured to use the CommonJS module system ("module": "commonjs") while your code isn’t explicitly using the exports object. TypeScript tries to create the exports object, but it isn’t properly initialized or used within your code.
Mixing Module Systems: You might be unintentionally mixing CommonJS and ES6 module syntax within the same project.
Outdated Configuration: Older configurations or build processes might rely on CommonJS even when you intend to use ES6 modules.

Resolving the Error

Here are several ways to resolve the "exports is not defined" error:

1. Switch to ES6 Modules:

The most recommended approach is to switch to the ES6 module system. Modify your tsconfig.json file and change the "module" compiler option to "es6".

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5", // Or a more modern target like "es6" or "esnext"
  }
}

Then, use export and import statements in your TypeScript code. For example:

module-1.ts:

export class Person {
  constructor() {
    console.log('Person Class');
  }
}

export default Person; // Export the default export

app.ts:

import Person from './mods/module-1'; // Import using the named import syntax

let a = 2;
let b: number = 3;

const person = new Person();

2. Remove CommonJS Configuration (If Applicable):

If you don’t intend to use CommonJS, remove the "module": "commonjs" line from your tsconfig.json file entirely. This will prevent TypeScript from trying to create the exports object.

3. Use Default Exports (for CommonJS Compatibility):

If you need to maintain compatibility with CommonJS for some reason, ensure your module has a default export. This is how CommonJS modules typically expose their main functionality. In module-1.ts:

export default class Person {
  constructor() {
    console.log('Person Class');
  }
}

Then, in app.ts:

import Person from './mods/module-1';

let a = 2;
let b: number = 3;

const person = new Person();

4. Consider Babel (for older environments):

If you are targeting older environments that don’t fully support ES6 modules, you might need to use a module transpiler like Babel. Install @babel/plugin-transform-modules-commonjs and configure Babel to transform your ES6 modules into CommonJS modules.

Best Practices

Consistency: Choose a module system (ES6 is highly recommended) and stick with it throughout your project.
Explicit Exports: Use export and import statements clearly to define your module dependencies.
Modern Tools: Use modern build tools and transpilers (like Babel) to ensure compatibility with different environments.
tsconfig.json: Carefully configure your tsconfig.json file to specify the desired module system, target JavaScript version, and other compiler options.