I've been attempting to utilize the https://github.com/timmywil/panzoom library within a TypeScript project that is compiled using webpack and babel.
The issue arises with the TypeScript method call:
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
which, when transpiled to JavaScript, becomes:
panzoom_1.default(document.querySelector("#pic"));
This results in a run-time error stating:
Uncaught TypeError: panzoom_1.default is not a function
When debugging the JavaScript code, it's found that panzoom_1 does not contain a default member as expected.
This seems to be related to various module types, default exports, and discrepancies in how babel and typescript handle imports, leaving me quite perplexed. The documentation indicates that panzoom is a UMD module.
A workaround I discovered involves importing differently and then casting it to 'any', but this feels like an unreasonable solution:
import * as Panzoom from '@panzoom/panzoom';
(<any>Panzoom)(document.querySelector("#pic"));
Below are the configuration details for the project:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="pic.jpg" id="pic" />
</body>
<script src="dist/bundle.js" type = "text/javascript"></script>
</html>
test.ts
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
tsconfig.json
{
"compilerOptions": {
"outDir": ".",
"sourceMap": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"module": "commonjs",
...
}
}
package.json
{
"name": "grr",
...
}
webpack.config.js
var webpack = require("webpack");
...
}.babelrc