Typescript, Webpack: Uncaught TypeError: Object (...) не является функцией - PullRequest
0 голосов
/ 08 сентября 2018

Я создал свою собственную библиотеку функций, используя Typescript. Одним из компонентов этой библиотеки является Aircraft.ts , который экспортирует функцию:

export function SimulateAircraft(dt: number, s0: IAircraftState, phi_cmd: number): IAircraftState

Затем они упаковываются с использованием Webpack, ts-loader и dts-bundle в один файл .js и один файл .d.ts. index.ts просто переэкспортирует все компоненты:

export * from './components/Aircraft'

Библиотека не развернута на npm, но я сделал ее доступной в локальной среде разработки, используя npm link.

Затем я импортирую функции из библиотеки в другой проект Typescript.

import { IAircraftState, SimulateAircraft } from 'oset';

где я использую функцию следующим образом:

setInterval(() => {
      const ac = SimulateAircraft(0.1, this.state.ac, 0);
      this.setState({ ac });
    }, 100);

Проект строится без ошибок. VSCode также не показывает никаких ошибок, а intellisense правильно показывает определение импортированной функции. Однако во время выполнения я получаю следующую ошибку в консоли браузера:

Uncaught TypeError: Object(...) is not a function

Объект, на который ссылается ошибка, это SimulateAircraft, который кажется неопределенным. Я довольно долго искал, чтобы попытаться найти решение. Я нашел похожие ошибки и способы их решения, но пока не нашел решения, которое решает мою проблему. Буду очень признателен за помощь.

webpack.config.js

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');

const libraryName = 'oset';

module.exports = {
    mode: "development",
    devtool: 'inline-source-map',
    entry: './src/index.ts',
    output: {
        filename: 'oset.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true
            })
        ]
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: [/node_modules/, /coverage/]
        }]
    },
    plugins: [
        new DtsBundlePlugin()
    ]
};

function DtsBundlePlugin() { }
DtsBundlePlugin.prototype.apply = function (compiler) {
    compiler.plugin('done', function () {
        var dts = require('dts-bundle');

        dts.bundle({
            name: 'oset',
            main: 'dist/index.d.ts',
            out: 'oset.d.ts',
            removeSource: true,
            outputAsModuleFolder: true // to use npm in-package typings
        });
    });
};

package.json

{
  "name": "oset",
  "version": "0.0.0",
  "description": "...",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "webpack",
    "clean": "rm -rf dist",
    "coverage": "npm test -- --coverage",
    "test": "jest --watch"
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "devDependencies": {
    "@types/jest": "^23.3.1",
    "dts-bundle": "^0.7.3",
    "jest": "^23.5.0",
    "ts-jest": "^23.1.4",
    "typescript": "^3.0.3"
  },
  "dependencies": {
    "redux": "^4.0.0"
  },
  "jest": {
    "testEnvironment": "node",
    "collectCoverageFrom": [
      "<rootDir>/src/*/**.{ts,tsx}"
    ],
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "verbose": true,
    "testURL": "http://localhost/"
  }
}

1 Ответ

0 голосов
/ 04 июля 2019

Это может быть слишком поздно, но попробуйте:

import * as aircraft from 'oset';

и затем:

setInterval(() => {
      const ac = aircraft.SimulateAircraft(0.1, this.state.ac, 0);
      this.setState({ ac });
    }, 100);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...