Exports is not defined typescript – How to Fix ReferenceError: exports is not defined in TypeScript?

Exports is not defined typescript: To fix the "Uncaught ReferenceError: exports is not defined" error, add a script tag that declares/defines an exports variable, such as <script> var exports ={} ;</script>above your JS script tag if in the browser, or remove the type attribute if it is set to the module in your package.json file in Node.js.

Fixing ReferenceError: exports is not defined in TypeScript?

Browser – ReferenceError: exports is not defined

Exports is not defined: If you see the error when running code in the browser, try to define a global exports variable above the script tags that load your JavaScript files.

index.html

<script>var exports = {};</script>

<!-- Add the JavaScript script below -->
<script src="index.js"></script>

This will define the exports variable and set it to an empty object, preventing an error from occurring if properties are accessed on it.

Browsers do not support the CommonJS syntax of require and module.exports (without using a tool like webpack), which is creating an error.

If you’re testing your code in the browser, remove the module property from your tsconfig.json file and change the target to es6.

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",  // change the targe to es6
    // "module": "commonjs", // Remove this or comment it (if browser env)
  }
}

When you remove the module option and set the target to es6, the imports and exports of your ES6 modules will not be compiled to the older CommonJS syntax that browsers do not support.

Because modern browsers support all ES6 features, ES6 is a suitable choice.

If it doesn’t work, try to set the type attribute to module in your script tags.

index.html

<!-- Set the correct path according to the setup --> 
<script type="module" src="index.js"></script>

And use the ES6 Modules syntax to import and export.

index.ts

import {v4} from 'uuid'
// Create a function which does the product of two arguments provided
export function multiply(a, b) {
  return a * b;
}

Because browsers do not support the CommonJS syntax, setting the module to commonjs in your tsconfig.json instructs TypeScript to emit CommonJS files, which is a very likely cause of the issue.

If you see the error in a Node.js application, consider removing the type attribute from your package.json file if it is set to module.

{
  "type": "module", // remove this liine or comment it
}

When type is set to module, we can no longer use CommonJS’s exports and require syntax and must instead use ES Modules syntax for all imports and exports, which may be causing the error.

This occurs when your package.json file has type set to module but your tsconfig.json file has module set to commonjs.

Because type = module instructs Node.js to utilise ES Modules syntax, while module = commonjs encourages TypeScript to produce CommonJS files, these two options are incompatible.

Examine your tsconfig.json file and make sure it looks like this.

tsconfig.json

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

Your target option should be es6 or higher, and your module should be CommonJS.

For imports and exports, make sure to utilize the ES6 modules syntax.

index.ts

import {myDefinedFunction} from './myFile'

export function multiply(a:number, b:number) {
  return a * b;
}

Because Node JS supports the CommonJS syntax, if you use the ES modules syntax and instruct TypeScript to produce CommonJS code by setting module to commonjs, the export above will be compiled to CommonJS and should work.

The only reason it wouldn’t work is that you’re emitting CommonJS files but instructing Node.js to read them using ES6 Module syntax.