Typescript/babel 导入导致“_1.default 不是函数”

Posted

技术标签:

【中文标题】Typescript/babel 导入导致“_1.default 不是函数”【英文标题】:Typescript/babel import causing "_1.default is not a function" 【发布时间】:2020-08-14 20:37:51 【问题描述】:

我正在尝试使用使用 webpack 和 babel 编译的 typescript 项目中的https://github.com/timmywil/panzoom。

问题在于打字稿方法调用:

import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));

被转译为以下javascript

panzoom_1.default(document.querySelector("#pic"));

然后生成以下运行时错误:

Uncaught TypeError: panzoom_1.default is not a function

如果我调试 javascript,则 panzoom_1 具有预期的函数签名,但它没有 default 成员。

这是无数不同类型的模块、默认导出以及 babel 和 typescript 如何导入它们的差异之间的某种类型的问题,但我完全迷失了。根据文档,panzoom 是一个 UMD 模块,如果有帮助的话。

我找到了一种解决方法,可以以不同的方式导入,然后将其转换为任何方式,但这显然很疯狂,对吗?:

import * as Panzoom from '@panzoom/panzoom';
(<any>Panzoom)(document.querySelector("#pic"));

这里是项目配置:

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

【问题讨论】:

试试import Panzoom from '@panzoom/panzoom'; 啊抱歉,我已经更正了这个问题,这确实是我最初的尝试。 这似乎是一个 babel 配置问题。您能否提供一个演示该问题的 stackblitz 示例? @Eldar 我不认为 stackblitz 支持 webpack/babel - 必要的配置文件在问题中 【参考方案1】:

我已经设法通过将"esModuleInterop": true 添加到tsconfig.json 来修复它。

https://www.typescriptlang.org/docs/handbook/compiler-options.html

发出 __importStar 和 __importDefault 帮助程序以实现运行时 babel 生态系统兼容性,并启用 --allowSyntheticDefaultImports 以实现类型系统兼容性。

这对我来说毫无意义,但这里有更多信息:

Understanding esModuleInterop in tsconfig file

【讨论】:

您自担风险尝试此操作。在 nestjs 项目中执行此操作会导致生成大约 1000 个已编译的 js 文件。不用说,这是一场噩梦。

以上是关于Typescript/babel 导入导致“_1.default 不是函数”的主要内容,如果未能解决你的问题,请参考以下文章

webpack + typescript + babel打包*.min.js文件的环境配置

为啥 Babel 不为 IE11 提供 URLSearchParams polyfill

为啥要使用 babel-loader 和 ts-loader?

Docker导入镜像并生成容器

Storybook main.ts:不能在模块外使用 import 语句

如何确定导致库导入缓慢的原因?