In order to practice, I decided to create a basic TypeScript project.
If it could be helpful, here is my ts.config:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
The structure of my project is quite simple:
https://i.sstatic.net/40cwi.png
Within the HTML file, I have imported the script in the <head> section:
<script defer type="module" src="./dist/index.js"></script>
Here is the contents of "classreminder.ts":
export class ClassTestReminder {
attribute: string;
constructor(attribute: string) {
this.attribute = attribute;
}
sayHello() {
console.log(`hello ${this.attribute}`);
}
}
Imported in the index.ts:
import {ClassTestReminder} from "./class/classreminder";
// other code...
// form / input / button management
const newObjectTest: ClassTestReminder = new ClassTestReminder("name");
newObjectTest.sayHello();
Unfortunately, I am encountering the following error:
Uncaught ReferenceError: exports is not defined
<anonymous> http://127.0.0.1:5500/dist/index.js:2
index.js:2:1
The index.js contains these lines at 1 & 2:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
I have tried several solutions mentioned in this post: Uncaught ReferenceError: exports is not defined in filed generated by Typescript
Unfortunately, none of them seem to work for me (unless there are some details that were not specified).
I came across a suggestion to comment out "module": "commonjs" from the ts.config. After trying that, the JavaScript now has a "classic import" with this line 1:
import {ClassTestReminder} from "./class/classreminder";
However, the browser throws another error stating: "module was blocked because of a disallowed mime type (text/html)".
I experimented with different changes in how I imported the script, but nothing seems to work (of course, if I comment out the import or instantiate the class within index.ts, everything works fine).
Does anyone know what I may be missing for the import to function properly?
Thank you!