Lately, I've been facing a challenge with my Typescript project. I'm working on connecting Typescript to a database and displaying the results in the browser. However, I keep encountering console errors like:
Uncaught ReferenceError: exports is not defined ("export class Database")
Uncaught ReferenceError: require is not defined ("import {Database} from "./Database";")
It seems that the files are being transpiled to a CommonJS module which the browser can't interpret.
My question is: Am I correct in diagnosing the issue this way? And what would be the best solution to resolve it?
Some suggestions recommend using WebPack or Browserify, while others mention AMD/SystemJS or RequireJS. I'm also interested in exploring Gulp and Webpack for this purpose but unsure of where to begin or how it fits into the workflow.
Here's a snippet of the Database Class:
export class Database{
//...
}
And the Mongo Class:
<reference path="../../../typings/browser/ambient/node/index.d.ts" />
<reference path="../../../typings/browser/ambient/mongodb/index.d.ts" />
import {IDatabase} from "../interfaces/IDatabase";
import {Database} from "./Database";
import {MongoClient} from "mongodb";
class MongoDB extends Database implements IDatabase{
//...
}
As well as the Database Interface:
export interface IDatabase{
//...
}
Lastly, here are some TSConfig Options:
"target": "es6",
"module": "commonjs",
"moduleResolution": "classic",
"sourceMap": true,