Typescript/babel import causing “_1.default is not a function”
Question
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:
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",
"target": "es6",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"traceResolution": true,
"experimentalDecorators": true,
"baseUrl": ".",
}
}
package.json
{
"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"
}
}
webpack.config.js
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
}
}
};
.babelrc
{
"presets": ["@babel/env"],
"plugins": ["@babel/transform-async-to-generator"],
"compact":false
}
1 answers
solution1
15 ACCPTED 2020-04-30 18:35:20
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.