Fix - ReferenceError: exports is not defined in TypeScript

avatar

Borislav Hadzhiev

Wed Mar 16 20223 min read

banner

Photo by Niti K.

Table of Contents #

  1. Fix - ReferenceError: exports is not defined in TypeScript
  2. Browser - ReferenceError: exports is not defined
  3. Node.js - ReferenceError: exports is not defined

Fix - 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 will define the exports variable and set 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 using a tool like webpack) of require and module.exports, which is causing the error.

If you are running your code in the browser, try removing the module property from your tsconfig.json file and setting 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 have set module to commonjs in your tsconfig.json, you are instructing 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 if it's set to module in your package.json file.

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 anymore and 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 above will get 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.