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:
commonjs(the current Typescript default) or one of the other suggested options assumes you are writing aNode.jsapplication, or- that you will use a module loader (like RequireJS) which loads files into your web application at runtime.
es6is a working standard that will keep yourimportline intact.- But
es6assumes you are importing from a javascript file (e.g.import { this } from './that.js'). - However, you are using a package manager, you hipster, and that module is not in an external javascript file, but is sitting in a
node_modulesdirectory somewhere waiting for your package bundler to roll it on up. - Typescript sees the
es6module style, but not thees6lib, and so believes you are loading an external javascript file. This is why you need to add thees6tolib: - But once you enable
lib:, the browser-specific code in your typescript will break without thedomlibrary, so you need to add that, too.
Step-by-step: Still need help? Follow these instructions:
- If you do not have a
tsconfig.json: In your project directory, typetsc --init - In the
tsconfig.jsonfile, find the line startingmodule:and change its value toes6like so:"module": "es6" - Further down, find the line starting
lib:and adddomandes6to the array, like so:"lib": ["dom","es6"]. Make sure to uncomment it if necessary.
More info:
- The
tsconfig.jsonschema contains all of the options for every key-value pair, including: - Current
moduleoptions (one of):"commonjs", "amd", "umd", "system", "es6", "es2015", "esnext",or"none" - Current
liboptions (any combination of):"es5", "es6", "es2015", "es7", "es2016", "es2017", "es2018", "esnext", "dom", "dom.iterable", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable", "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.intl", "es2017.sharedmemory", "es2017.string", "es2017.typedarrays", "es2018.intl", "es2018.promise", "es2018.regexp", "esnext.asynciterable", "esnext.array", "esnext.intl", "esnext.symbol"