导致"_1.默认不是函数"的打字稿/小标题导入； [英] Typescript/babel import causing "_1.default is not a function"
问题描述
我正在尝试从打字稿项目中使用 https://github.com/timmywil/panzoom 用webpack和babel编译.
问题在于打字稿方法调用:
从'@ panzoom/panzoom'导入Panzoom；Panzoom(document.querySelector(#pic"));; 已转译为以下javascript:
panzoom_1.default(document.querySelector(#pic"));; 然后会生成以下运行时错误:
未捕获的TypeError:panzoom_1.default不是函数 如果我调试了javascript，则 panzoom_1 具有预期的功能签名，并且没有 default 成员.
这是无数种不同类型的模块，默认导出以及babel和typescript导入它们的方式之间的某种类型的问题，但是我完全迷失了.根据文档，如果有帮助， panzoom 是UMD模块.
我发现了一种解决方法，可以以其他方式导入，然后将其强制转换为任何方法，但这显然是疯狂的，对吗?:
import *从'@ panzoom/panzoom'作为Panzoom导入；(< any> Panzoom)(document.querySelector(#pic"))); 这是项目配置:
test.html
<！DOCTYPE html>< html>< head>< meta charset ="utf-8"></head><身体>< img src ="pic.jpg" id ="pic"/></body>< script src ="dist/bundle.js" type ="text/javascript"></script></html> test.ts
从'@ panzoom/panzoom'导入Panzoom；Panzoom(document.querySelector(#pic"))); tsconfig.json
{"compilerOptions":{"outDir":."，"sourceMap":否，"noImplicitAny":是的，"suppressImplicitAnyIndexErrors":是的，"module":"commonjs"，"target":"es6"，"jsx":反应"，"allowSyntheticDefaultImports":是的，"traceResolution":是的，"experimentalDecorators":是的，"baseUrl":."，}} package.json
{"name":"grr"，"version":"0.0.0"，私人":是的，依赖关系":{"@ 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');返回 {入口: ["@ babel/polyfill"，path.resolve(__ dirname，"test.ts")]，输出: {文件名:"bundle.js"，libraryTarget:"var"}，解决: {模组:['node_modules']，扩展名:[".ts"，.tsx"，.js"，.json"]}，模块: {规则:[{测试:/\.tsx?$/，装载机:[{加载程序:"babel-loader"，选项:{紧凑:错误，预设:[["@ babel/preset-env"，{目标:> 0.25％，没有死亡"}]]}}，'awesome-typescript-loader']}]}，devtool:错误，优化: {最小化:PROD}}}; .babelrc
{预设":["@ babel/env"]，插件":["@ babel/transform-async-to-generator"]，紧凑":false} 我设法通过在 tsconfig.json 中添加"esModuleInterop":true 来解决此问题./p>
https://www.typescriptlang.org/docs/handbook/compiler-options.html
发出__importStar和__importDefault帮助程序以实现运行时babel生态系统兼容性，并启用--allowSyntheticDefaultImports以实现类型系统兼容性.
这对我没有任何意义，但是这里有更多信息:
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
}
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
这篇关于导致"_1.默认不是函数"的打字稿/小标题导入；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
