Styjun

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:RepoMastersrcTypeScriptpackage.json'
npm WARN saveError EPERM: operation not permitted, rename 'C:RepoMastersrcTypeScriptpackage-lock.json.1161578677' -> 'C:ReposrcTypeScriptpackage-lock.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:RepoMastersrcTypeScriptpackage.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:RepoMastersrcTypeScript> tsc ProgramParser.ts

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

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

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"
 ]
 

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