Typescript/babel import causing “_1.default is not a function”

问题

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:

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

来源：https://stackoverflow.com/questions/61524130/typescript-babel-import-causing-1-default-is-not-a-function

标签

javascript

typescript

Webpack

babeljs