Error Typescript - Uncaught ReferenceError: exports is not defined

Question

I am facing this issue. I created this simple app.ts to learn about promises in Typescript:

import {Promise} from 'es6-promise'

(() => {
console.log('inicio');

const prom1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Se termino el timeout');
    }, 1000);
});

prom1
    .then(mensaje => console.log(mensaje))
    .catch(err => console.warn(err))

console.log('fin');
})();

Then I compile this (tsc app.ts). And it had create an app.js:

"use strict";
exports.__esModule = true;
var es6_promise_1 = require("es6-promise");
(function () {
    console.log('inicio');
    var prom1 = new es6_promise_1.Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('Se termino el timeout');
        }, 1000);
    });
    prom1
        .then(function (mensaje) { return console.log(mensaje); })["catch"](function (err) { return console.warn(err); });
    console.log('fin');
})();

Also, this is the tsconfig.json

{
  "exclude": ["typescript"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

but when I run this in the browser console, it appears the following alert:

Uncaught ReferenceError: exports is not defined
    at app.js:2

I am frustrated and have tried everything that has appeared on the internet and nothing works. I am trying to learn how to use Angular

"but when I run this in the console" Do you mean the browser console? — T.J. Crowder
– T.J. Crowder, Commented Dec 1, 2020 at 16:00
The code you've posted doesn't seem to have any relation to Angular. Where are you trying to run this code, and what TypeScript configuration (see tsconfig.json) have you compiled it with? — jonrsharpe
– jonrsharpe, Commented Dec 1, 2020 at 16:02
Hi... Yes, browser console. And my tsconfig.json is the following:{ "exclude": ["typescript"], "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "noImplicitAny": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } — alearmas
– alearmas, Commented Dec 1, 2020 at 17:36
you can set module option to es6 to have es6 import instead — ufollettu
– ufollettu, Commented Dec 2, 2020 at 23:31

T.J. Crowder · Accepted Answer · 2020-12-01 16:03:55Z

1

but when I run this in the console

If you mean the browser console, that's as expected. That code isn't compiled for use standalone in a browser, it's compiled to be used by something that understands CommonJS modules. (Browsers don't, without library/bundler support.)

If you just want to compile TypeScript to JavaScript and run the result in a browser directly, tell TypeScript to output ESM (via the module option, setting it to "ESNext").

But for an Angular project, you probably want to use a bundler like Webpack or Rollup instead.

answered Dec 1, 2020 at 16:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error Typescript - Uncaught ReferenceError: exports is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related