In this tutorial, I will show you how to fix “ReferenceError: Exports is not defined” error in TypeScript. There’re many ways to get it done, but we’ll cover two of the most common ways. Please read the entire article to understand what I want to convey.
Cause of the “ReferenceError: Exports is not defined” error in TypeScript
The “ReferenceError: Exports is not defined” error in TypeScript occurs when you use the ‘require’ and ‘export’ syntax of CommonJS module and ES Modules for all of our imports. The ‘export’ must be stuck, which can cause errors.
How to fix this error?
Node.js
To fix the “ReferenceError: exports is not defined” error in TypeScript. If you use the Node.js application, let’s open package.json and check if the package.json file has a ‘type’ property set to ‘module’ look like the example below. If yes, let’s remove it.
Step 1: Remove property in package.json
For example:
{
"type": "module", // Remove it
}Suppose ‘type’ property has set ‘module’ in package.json. It’s not able to use CommonJS syntax. The ‘module’ property must also have been set in the tsconfig.json file.
Step 2: Add properties of ES6 Syntax
Open the tsconfig.json file and set them up like the example below:
{
…
"compilerOptions": {
"target": "es6",
"module": "commonjs",
…
}
}Your target alternative has to be at least ES6, and the ‘module’ property must be set to CommonJS. To make sure you are using the ES6 Module, let’s try to use ‘require’ or ‘export’ syntax of the CommonJS module.
Step 3: Check to see if still geting errors
For example:
function.ts
export const testFunction = function (): void {
console.log("This is a test function");
};Call the function on the index.ts file
index.ts
import testFunction from "./function.ts"; testFunction();
Output
This is a test functionBrowsers
If you are coding and running in the browser, let’s try ‘export’ syntax to define a global variable above script tags and load your Javascript file.
Step 1: Try ‘exports’ syntax to define a global variable
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>LearnShareIT</title>
</head>
<body>
<script>var exports = {};</script>
<script src="index.js"></script>
</body>
</html>You won’t get an error message if you use ‘exports’ to define a variable and set it without any object. The properties will be accessed.
Because the browser does not support the CommonJS module, you can’t use ‘require’ and ‘module.exports’. That is the cause of the error, so next step, you need to set ‘target’ property to ‘es6’.
Step 2: Set properties on tsconfig.json
{
"compilerOptions": {
"target": "es6",
// "module": "commonjs" // Remove it if having
}
}Summary
The “ReferenceError: exports is not defined” error in TypeScript occurs when you use the ‘require’ and ‘export’ syntax of CommonJS module and ES Modules for all of our imports that result in exports stuck. Another case is that the CommonJS syntax you are using is outdated. After reading the post, I hope you will learn how to fix this error. I hope this tutorial is helpful to you. Happy coding.
Maybe you are interested:
- Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations – How to solve this error?
- ReferenceError: exports is not defined in TypeScript
Hello, my name is Philip Cabrera. My job is a programmer, and I have 4 years of programming expertise. Follow me if you need assistance with C, C++, JS, TS, or Node.js. I hope my posts are useful to you.
Name of the university: HUMG
Major: IT
Programming Languages: C, C++, JS, TS, Node.js