Static typing has been added to TypeScript, which is a syntactic superset of JavaScript.. It is a rigorous superset of JavaScript in terms of syntax and gives the language optional static typing. It transpiles to JavaScript and is made for the creation of huge apps. ReferenceError: exports is not defined in TypeScript is a common error that many programmers encounter. Let’s read this article to find the best solution to fix it.

When Do You Get The Error “ReferenceError: exports is not defined” In TypeScript?

When you run your program, you easily encounter the following error:

ReferenceError: exports is not defined 

How To Solve The Error “ReferenceError: exports is not defined” In TypeScript?

Method 1: Try adding a global exports variable above the script tags

Try adding a global exports variable above the script tags that load your JS files if you encounter the error when using code that executes in the browser.

<script>var exports = {};</script> 
<!-- your JS script should be below --> 
<script src="main.js"></script>

The error is brought on by the fact that browsers do not support the CommonJS syntax of need and module.exports (unless you use a program like webpack).

If your code runs in the browser, try setting the target to es6 and removing the module property from your tsconfig.json file.

{ 
  "compilerOptions": { 
    "target": "es6", // set this to es6 
    // "module": "commonjs", // Remove this (if browser env) 
  } 
}

Your ES6 modules’ imports and exports won’t be compiled to the old CommonJS syntax browsers don’t support when you remove the module option and set the target to es6.

Current browsers support all ES6 features; hence ES6 is a wise choice.

If this is unsuccessful, consider setting the type property in your script tags to module.

<!-- correct path according to your setup --> 
<script type="module" src="main.js"></script>

Now, let’s use the ES6 Modules syntax for import and export.

import {v4} from 'uuid' 
export function sum(x, y) { 
  return x + y; 
}

Method 2: Delete the “type”: “module” option

Excepting the solution mentioned above. There is another solution for you to solve the error “ReferenceError: exports is not defined” in TypeScript. It is deleting the "type": "module" option from tsconfig.json.

For example, if you have:

{ 
 //... 
 "type": "module" 
 //... 
}

For the TypeScript compiler to translate the code into something that doesn’t have export and import in the output files, you should delete it from tsconfig.json.

Additionally, you also can delete the type attribute If it set to module in your Node.js package.json file.

You cannot use CommonJS’ exports and require syntax when the type is set to module and must use ES Modules syntax for all imports and exports, which may be the root of the mistake.

This error happens because your package.json file has type set to module, but in your tsconfig.json file you have already had module set to commonjs.

Make sure your tsconfig.json file resembles the following when you open it.

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

Your module should be set to CommonJS, and your target option should be at least es6.

Make sure to import and export using the syntax of the ES6 module.

import {myFunction} from './myFile' 
export function sum(x:number, y:number) { 
  return x + y; 
}

When you use the ES modules syntax and tell TypeScript to produce CommonJS code by setting module to commonjs, the export in the preceding example is compiled to CommonJS. It should function because Node JS supports the CommonJS syntax.

The only scenario that wouldn’t work is if you were emitting CommonJS files while instructing Node.js to read them using ES6 Module syntax.

Conclusion

Individual solutions provided in this article are several of the most basic for anyone encountering the problem ReferenceError: exports is not defined in TypeScript. We believe that you can easily handle your problem with these solutions. We have a growing community of people who are usually happy to assist you if you still need assistance or have any questions. Furthermore, we anticipate a more creative day full of new ideas and code.

Read more

→ Fix the error “Uncaught referenceerror: require is not defined” in Javascript