Typescript and exports - how to build for a browser without webpack?

Question

JavaScript

Hello. I have a typescript project. When I compile it, there are no problems - all js files are generated. However, this does not work in the browser due to a bug with exports:

Uncaught ReferenceError: exports is not defined

The problem here is that the generated js files contain this line:

Object.defineProperty(exports, "__esModule", { value: true });

, which causes problems because the browser doesn't know any exports. It appears there regardless of what I set in module and target in tsconfig.json.

TL;DR : I want to be able to import , but not lose the ability to debug the typescript in the browser. I will describe using the uikit library as an example. Before you text me about Webpack, I'm already using it. If you collect everything with webpack, the "exports is not defined" error is gone, webpack resolves everything. However, webpack is more suitable for production, when you need to collect everything into one finished file. First, it compiles in 5 seconds, which is a long time (I have 10 lines of test code).import ... from "..."


Secondly, if you collect everything in one file, the possibility of debugging the code in the browser disappears - there is no source map, and how to debug a huge file that includes libraries.
Thirdly, webpack itself has problems with some libraries (in particular, for uikit it erases the uikit global variable, which causes it to stop working, and this has to be done manually with crutches through - although this is already a solved problem, it is still one more reason why webpack makes development and debugging difficult). I also know about target:ESNext and module:ES2015 (and other tsconfig settings). This does not work. Right now I set these values ​​​​in the tsconfig and the line with exports is still present, nothing changes. I've googled for solutions on this for a long time, but nothing seems to help.(<any>window)["uikit"] = UIkit;


Finally, there is an option with references ///<reference path="..." />, when you also need to put System for module in tsconfig. It works. However, this takes away the ability to do this: Because of the way d.ts is written for uikit (taken from @types/uikit with npm), there is no other way to use it. It is supposed to be imported, not referenced. So, although I like references, typedefs of other people's libraries do not allow me to use them normally. I tried including core-js as well as commonjs, but they didn't change anything either. Maybe there is some way out that I don't see? Thanks in advance.
import UIkit from "uikit";

Answer 1

It was the wrong config. See comments.