Rendall's blog

Problem: Typescript adds Object.defineProperty(exports, "__esModule", { value: true });

code typescript

You're using Typescript in a frontend project, and import a module into your code. Something like:
import { Observable } from 'rxjs';

You're using a bundler like Webpack that squeezes those modules into a single minimized javascript file, so you want to keep that line as-is.

However, when Typescript compiles into javascript, it adds the line Object.defineProperty(exports, "__esModule", { value: true }); which causes an error Uncaught ReferenceError: exports is not defined or something similar in your browser's console.

You search for solutions, but everyone is talking about using RequireJS like it's 2014!

You want to get rid of this unwanted Object.defineProperty line but leave the rest of your code untouched.

Solution: Modify these two lines in your tsconfig.json to the following:
"module": "es6",
"lib": ["dom","es6"]

Explanation:

Step-by-step: Still need help? Follow these instructions:

  1. If you do not have a tsconfig.json: In your project directory, type tsc --init
  2. In the tsconfig.json file, find the line starting module: and change its value to es6 like so: "module": "es6"
  3. Further down, find the line starting lib: and add dom and es6 to the array, like so: "lib": ["dom","es6"]. Make sure to uncomment it if necessary.

More info:

← Home