Импорт Typescript / babel вызывает "_1.default не является функцией" - PullRequest
Новая
       36

Импорт Typescript / babel вызывает "_1.default не является функцией"

0 голосов
/ 30 апреля 2020

Я пытаюсь использовать https://github.com/timmywil/panzoom из проекта машинописи, скомпилированного с webpack и babel.

Проблема в том, что вызов метода машинописи: 

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 и машинопись, но я полностью потерян. Согласно документам, 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": ".",
    }
  }

пакет. 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
        }
    }
};

.babelr c

{
  "presets": ["@babel/env"],
  "plugins": ["@babel/transform-async-to-generator"],
  "compact":false
}

1 Ответ

1 голос
/ 30 апреля 2020

Мне удалось это исправить, добавив "esModuleInterop": true к tsconfig.json.

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

Emit __importStar и __importDefault помощников для времени выполнения Совместимость экосистемы babel и включение --allowSyntheticDefaultImports для совместимости типов систем.

Что для меня ничего не значит, но немного больше информации здесь:

Понимание esModuleInterop в файле tsconfig

...