typescript - simple module example fails

Question

Person.ts:

export class Person {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  get name(): string {return this._name};
}

test.ts:

import {Person} from "./Person";

var user = new Person("John");
document.getElementById("h1").innerHTML = user.name;

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5"
    ,"outDir" : "build"
  }
}

When opening the result in Chrome, the following error is shown on the console:

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

see this comment http://stackoverflow.com/a/33294807/4096589 the browser does not know about commonjs modules — radix, Apr 22 '17 at 18:15
which browser are you using? maybe you are missing a polyfill :) — Digvijay, Apr 22 '17 at 18:16

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

My solution is based on this answer: https://stackoverflow.com/a/36769278/1977315

install requireJs
```
npm install requirejs
```

include requireJs in the html page

<h1 id="h1"></h1>
<script src="../node_modules/requirejs/require.js" data-main="test.js"></script>

compile the code with the module amd arg:
```
tsc -module amd
```

edited May 23 '17 at 11:47

Community

1
1

answered Apr 22 '17 at 18:59

nagy.zsolt.hun

6,292
12
56
95

radix · Answer 2 · 2017-04-22T18:40:28.440

You need to make your app compatible with browsers. for example using webpack:

> npm install webpack -g
> webpack build/test.js bundle.js

and in your html

<script src="/bundle.js"></script>

Typescript compilation will compile your files with commonjs module resolution, Which will not work in browsers (nodejs uses commonjs). Webpack is an example for a bundler that will take you app and make it browser ready.

Digvijay · Answer 3 · 2017-04-22T19:37:54.167

The transpiled code is below:

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Person = (function () {
        function Person(name) {
            this._name = name;
        }
        Object.defineProperty(Person.prototype, "name", {
            get: function () { return this._name; },
            enumerable: true,
            configurable: true
        });
        ;
        return Person;
    }());
    exports.Person = Person;
});

however if you see that this expects browsers to understand the module system and in this case requirejs. If you wish you can just take the snippet and use it - its perfectly fine ES5 code.

var Person = (function() {
  function Person(name) {
    this._name = name;
  }
  Object.defineProperty(Person.prototype, "name", {
    get: function() {
      return this._name;
    },
    enumerable: true,
    configurable: true
  });;
  return Person;
}());

Unfortunately modules default to CommonJS – Aluan Haddad Apr 23 '17 at 04:14 — Aluan Haddad, Apr 23 '17 at 04:14

typescript - simple module example fails

3 Answers3