I am working on a python project together with TypeScript, when compiling my file is generated .js
but when I enter the web page in the console I get the error
exports is not defined
This file is called video.ts
and ends up rendering like this
"use strict";
exports.__esModule = true;
var controls_video_1 = require("./class/controls_video");
window.onload = init;
var video;
var shortcut, player;
function init() {
video = document.getElementById("video");
player = new controls_video_1.Controls_video(video);
shortcut.add("space", player.reproducir);
shortcut.add("right", player.adelantar_5);
shortcut.add("left", player.retroceder_5);
shortcut.add("f", player.full_screen);
init_listeners();
}
function init_listeners() {
var volume = document.getElementById("volumen");
var playStop = document.getElementById("playStop");
volume.addEventListener("change", player.set_volume);
playStop.addEventListener("click", player.reproducir);
}
The error marks me on line 2 exports.__esModule = true;
.
My TypeScript version is 4.4.4
and the EcmaScript version it renders to JS with isES5
I just generated the file tsconfig.json
with the command tsc --init
and the content is this (removing the commented lines):
{
"compilerOptions": {
/* Language and Environment */
"target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
It is a variable of the Node.js modules , it must be removed.
The
require
, apparently it is compiling badly, or for Node.You could look in the build settings and change the options... Another way is to add the file
.js
, but if it's TypeScript then you can't.Alternative
You have to create the file tsconfig.browser.json and assign the following option.
Then run the following command, or add it in
package.json
:The structure of the tsconfig.browser.json file is similar to that of tsconfig.json :
Source: https://medium.com/collaborne-engineering/typescript-create-library-for-nodejs-and-browser-fece291d517f
You could even copy the configuration from the other file and change its parameters.
If you still have problems it may be because it seems that not all browsers have support for
import
... I see an answer on SO in English, they addtype="module"
to the script in this wayand it works since Firefox 60... If possible, it is better to avoid the
import