Menu
I am trying to use https://github.com/timmywil/panzoom from a typescript project compiled with webpack and babel.
The problem is that the typescript method call:
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
is transpiled to the following javascript:
panzoom_1.default(document.querySelector("#pic"));
which then generates the following run-time error:
Uncaught TypeError: panzoom_1.default is not a function
If I debug the javascript then panzoom_1 has the expected function signature and it has no default member.
This is some type of issue between the myriad different types of module, default exports and differences in how babel and typescript import them but I am totally lost. According to the docs, panzoom is a UMD module if that helps.
I have found a work-around to import in a different way and then cast it to any, but this is clearly insane right?:
import * as Panzoom from '@panzoom/panzoom';
(<any>Panzoom)(document.querySelector("#pic"));
Here is the project configuration:
<!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>
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
{
"compilerOptions": {
"outDir": ".",
"sourceMap": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"traceResolution": true,
"experimentalDecorators": true,
"baseUrl": ".",
}
}
{
"name": "grr",
"version": "0.0.0",
"private": true,
"dependencies": {
"@babel/polyfill": "^7.8.7",
"@panzoom/panzoom": "^4.1.0",
"npm-update-all": "^1.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-transform-async-to-generator": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"typescript": "^3.8.3"
}
}
var webpack = require("webpack");
var path = require('path');
module.exports = (env, options) => {
var PROD = (options.mode === 'production');
return {
entry: [
"@babel/polyfill",
path.resolve(__dirname, "test.ts")
],
output: {
filename: "bundle.js",
libraryTarget: "var"
},
resolve: {
modules: [
'node_modules'
],
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loaders: [
{
loader: 'babel-loader',
options:
{
compact: false,
presets: [
[
"@babel/preset-env",
{
targets: "> 0.25%, not dead"
}
]
]
}
},
'awesome-typescript-loader'
]
}
]
},
devtool : false,
optimization: {
minimize: PROD
}
}
};
{
"presets": ["@babel/env"],
"plugins": ["@babel/transform-async-to-generator"],
"compact":false
}
937
By using babel's support for TypeScript, you get the ability to work with existing build pipelines and are more likely to have a faster JS emit time because Babel does not type check your code.
If you need custom transformations, you'll need to use Babel. The good news is that most TypeScript tools allow you to both use TypeScript and then run the code through Babel afterwards, to get the best of both worlds. But this obviously comes with additional complexity in your build-chain.
When set to true, allowSyntheticDefaultImports allows you to write an import like: ts. import React from "react"; instead of: ts.
I have managed to fix it by adding "esModuleInterop": true to tsconfig.json.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.
Which means nothing to me, but a bit more information here:
Understanding esModuleInterop in tsconfig file
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
