I rely on a dependency that is transpiled to ES6.
My goal is to leverage ES2019 features in my own code.
Ultimately, I aim to output ES6.
This is how I set up my tsconfig
{
"compilerOptions": {
"module": "CommonJS",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": [
"es2019",
"dom"
],
"target":"ES6"
}
}
Although this setup compiles fine, I encounter a
Uncaught ReferenceError: exports is not defined
error when loading in the browser due to one of my files. To address this, I included "@babel/plugin-transform-modules-commonjs"
in a .babelrc file:
{
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}
Applying this solution resolves the issue, but I am puzzled as to why it's necessary. My tsconfig already specifies modules as commonjs and the dependency also uses commonjs according to its tsconfig(!?).