After setting up an HTML5 Boilerplate project in WebStorm, I navigate to the localhost:8080/myproject/src URL to run it. Within the src folder, there is a js directory structured like this:
libraries
models
place.model.ts
place.model.js
address.model.ts
address.model.ts
main.ts
main.js
The Typescript compiler converts the .ts files to .js
Within my .model.ts files, I have defined a class as follows:
export class MyClass {
x: string;
constructor(x: string) {
this.x = x;
}
}
In my main.ts file, I import the class like so:
import {MyClass as My} from "./models/myclass.model";
However, upon attempting to access the URL, I encounter the error:
Uncaught ReferenceError: exports is not definedObject.defineProperty(exports, "__esModule", { value: true });
I attempted to resolve this by adding the script below to my index.html file:
<script>var exports = {};</script>
This action resulted in a new error message:
ReferenceError: require is not definedWhat could be missing in my setup and how can I rectify it?
UPDATE Initially, the project lacked a tsconfig file, which I manually included with the following content:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
An attempt was made without "module": "commonjs", but unfortunately, it did not solve the issue.