ReferenceError: exports is not defined in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Table of Contents #

  1. Browser - ReferenceError: exports is not defined
  2. Node.js - ReferenceError: exports is not defined

ReferenceError: exports is not defined in TypeScript #

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

Browser - ReferenceError: exports is not defined #

If you are getting the error for code that runs in the browser, try defining a global exports variable above the script tags that load your JS files.

index.html
<script>var exports = {};</script> <!-- 👇️ your JS script should be below --> <script src="index.js"></script>
This defines the exports variable and sets it to an empty object, so you don't get an error if properties are accessed on it.

Browsers don't support the CommonJS syntax (unless you use a tool like webpack) of require and module.exports, which causes the error.

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

tsconfig.json
{ "compilerOptions": { "target": "es6", // 👈️ set this to es6 // "module": "commonjs", // 👈️ REMOVE this (if browser env) } }

When you remove the module option and set target to es6, your ES6 modules imports and exports won't get compiled to the older CommonJS syntax that browsers don't support.

Modern browsers support all ES6 features, so ES6 is a good choice.

If this doesn't work, try setting the type attribute to module in your script tags.

index.html
<!-- 👇️ correct path according to your setup --> <script type="module" src="index.js"></script>

And import and export using the ES6 Modules syntax.

index.ts
import {v4} from 'uuid' export function sum(a, b) { return a + b; }
When you set module to commonjs in your tsconfig.json, you instruct TypeScript to emit CommonJS files and browsers don't support the CommonJS syntax, so this is a very likely cause of the error.

Node.js - ReferenceError: exports is not defined #

If you get the error in a Node.js application, try removing the type attribute from your package.json file if it's set to module.

package.json
{ "type": "module", // 👈️ remove this }

When type is set to module we are not able to use the exports and require syntax of CommonJS and we have to stick to ES Modules syntax for all of our imports and exports, which might be causing the error.

This happens when you have type set to module in your package.json file, but have module set to commonjs in your tsconfig.json file.

These two options are not compatible because type = module instructs Node.js to use ES Modules syntax, and module = commonjs instructs TypeScript to emit CommonJS files.

Open your tsconfig.json file and make sure it looks something like the following.

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

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

Make sure you use the ES6 modules syntax for your imports and exports.

index.ts
import {myFunction} from './myFile' export function sum(a:number, b:number) { return a + b; }

Node JS supports the CommonJS syntax, so when you use ES modules syntax and instruct TypeScript to emit CommonJS code by setting module to commonjs, the export in the example above gets compiled to CommonJS and should work.

The only reason for it not to work would be - you're emitting CommonJS files, but have instructed Node.js to use ES6 Module syntax to read them.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.