Exports is not defined ia tsc'ed (js) files

Question

I'm relatively new to typescript and I quite do not understand why after performing tsc Program.ts and then running

Program.js in browser it yells at me ReferenceError: exports is not defined

Program.ts

import { TestClass } from './TestClass';

var tc = new TestClass();

console.log(tc.Test("test"));

TestClass.ts

import {Data} from "./Data";

export class TestClass
{
    constructor() {}

    Test(originalString:string)
    {
        console.log(Data.Symbols["John"] + " " + originalString);
    }
}

Data.ts

export abstract class Data
{
    public static Symbols:{[symbol: string] : string} = 
    {
        "John":"a5fq36831v",
    }
}

package-lock.json

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies":
  {
    "uniq": 
    {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
    }
  }
}

I have npm i @types/node installed

I have seen this thread: Typescript ReferenceError: exports is not defined

but I don't have any tsconfig.json or babelrc file.

This trick works partly for me <script>var exports = {};</script> t

because after that ReferenceError: require is not defined

Is it possible to make it work without installing additional tons of software?

npm i common-js

npm WARN saveError ENOENT: no such file or directory, open 'C:\Repo\Master\src\TypeScript\package.json'
npm WARN saveError EPERM: operation not permitted, rename 'C:\Repo\Master\src\TypeScript\package-lock.json.1161578677' -> 'C:\Repo\src\TypeScript\package-lock.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Repo\Master\src\TypeScript\package.json'
npm WARN TypeScript No description
npm WARN TypeScript No repository field.
npm WARN TypeScript No README data
npm WARN TypeScript No license field.

+ common-js@0.3.8
added 1 package in 2.141s
PS C:\Repo\Master\src\TypeScript> tsc ProgramParser.ts

ReferenceError: exports is not defined Program.js:2:1
ReferenceError: Parser is not defined html.html:40:6

have you checked this link to solve the `ReferenceError: require is not defined` https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined — weegee, Apr 01 '19 at 06:46
No `tsconfig.json`? That sounds alarming. `tsconfig.json` is the configuration file on how the transpiling should be done. I guess you can use flags if you want to avoid making `tsconfig.json`. But more importantly, are you building a node.js app or a web app? You mentioned browser so I assume web app, then I think what you need is something like `tsc --module es6 `. `exports` is not defined error shows because your `tsc` command probably transpiled for commonjs which is for nodejs apps, not web app. — Dakota Jang, Apr 05 '19 at 06:37
possible duplicate of https://stackoverflow.com/questions/43042889/typescript-referenceerror-exports-is-not-defined — chharvey, Apr 06 '19 at 14:58

score 0 · Answer 1 · answered Apr 01 '19 at 06:36

0

You need to check whether commonjs is installed in environment or not .

answered Apr 01 '19 at 06:36

Vikash Kumar

1,712
1
11
17

Try adding "module": "es6" in package.json – Vikash Kumar Apr 01 '19 at 07:12
The thing is that I don't have package json :P I have something like ``package-lock.json`` – Joelty Apr 01 '19 at 07:24
I guess best solution will be importing requires.js in this file – Vikash Kumar Apr 01 '19 at 13:03

score 0 · Answer 2 · answered Apr 04 '19 at 14:16

You can just add a tsconfig.json file at the root of your project that specifies the compilation target. Something like this will most likely work:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ]
  }
}

score 0 · Answer 3 · answered Apr 05 '19 at 19:40

I can offer two options:

You can use a bundler like webpack or Parcel to take your TypeScript code and make it run in the browser, with the bundle being responsible for handling your file imports.
You can use use the tsconfig compiler option outFile to make TypeScript only create a single file for all of your front end JavaScript

Exports is not defined ia tsc'ed (js) files

3 Answers3