1

Typescript code:

export class GridObject {
  constructor() {
    alert("hello from GridObject constructor!");
  }
}

var go = new GridObject();

I'm calling the compiled js from my HTML. When I remove "export", the alert shows up, and it doesn't when I have "export".

The following is the entire compiled js when using export

"use strict";
exports.__esModule = true;
var GridObject = /** @class */ (function () {
  function GridObject() {
    alert("hello from GridObject constructor!");
  }
  return GridObject;
}());
exports.GridObject = GridObject;
var go = new GridObject();

removing export from the TS removes the following 3 lines from the JS

"use strict";
exports.__esModule = true;

exports.GridObject = GridObject;

My HTML calls this script like this:

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

I tried adding type="module" but that didn't work either.

Anthony Yershov
  • 197
  • 12
  • That's because `export` is for JS modules. And it should be loaded in a different way https://developers.google.com/web/fundamentals/primers/modules – zerkms Mar 20 '19 at 21:17
  • The compiled JS doesn't actually have the "export" keyword. – Anthony Yershov Mar 20 '19 at 21:22
  • What does the error message say in the browser console? Is it something like "VM56:1 Uncaught ReferenceError: exports is not defined" ? – artem Mar 20 '19 at 21:39
  • In chrome, right click and select inspect or press `ctrl+i` – maxpelic Mar 20 '19 at 21:55
  • @artem Uncaught ReferenceError: exports is not defined at GridObject.js:2 – Anthony Yershov Mar 20 '19 at 21:55
  • May I ask why you added the `export` keyword? – maxpelic Mar 20 '19 at 21:56
  • @maxpelic because I was writing some code that got a bit messy, so I wanted to split it up into separate files. Specifically 1 file for each class. – Anthony Yershov Mar 20 '19 at 22:01
  • 1
    @AnthonyYershov so that's the reason - the compiled code throws an exception which prevents the line with `new GridObject()` from being executed. The exception is thrown because that's what browsers do when `"use strict";` is declared and there's a reference to undeclared global object. `exports` is undeclared because it's a `node.js` specific global, which is absent in the browser. The compiled code is referencing `node.js`-specific `exports` global probably because the compilation target is `CommonJS`. – artem Mar 20 '19 at 22:01
  • 1
    The typical way to split code into modules and then use it in the browser is to use some kind of module bundler like webpack. – artem Mar 20 '19 at 22:02
  • So I googled the error msg and I found an answer that worked! All I had to do was type in before JS references. https://stackoverflow.com/questions/43042889/typescript-referenceerror-exports-is-not-defined – Anthony Yershov Mar 20 '19 at 22:03
  • @AnthonyYershov if you target pre-ES2015, then how exactly it exports a symbol to the global space depends on the compiler configuration. Just open the compiled file and check what it does. – zerkms Mar 20 '19 at 22:04
  • @zerkms vs code underlines 'exports' and gives the following tool-tip: File is a CommonJS module; it may be converted to an ES6 module.ts(80001). Is this what you mean? – Anthony Yershov Mar 20 '19 at 22:13
  • https://stackoverflow.com/q/7576001/251311 – zerkms Mar 20 '19 at 22:44

0 Answers0