CODEWITHSUNDEEP
webpackimporttypeerror
Tristan Martindale
Tristan Martindale

Reputation: 81

Typescript, Webpack: Uncaught TypeError: Object(...) is not a function

I have created my own library of functions using Typescript. One of the components of this library is Aircraft.ts which exports the function:

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

These are then packaged using Webpack, ts-loader and dts-bundle into a single .js file and a single .d.ts file. index.ts simply rexports all components:

export * from './components/Aircraft'

The library is not deployed to npm, but I have made it available in my local development environment using npm link.

I then import functions from the library into another Typescript project.

import { IAircraftState, SimulateAircraft } from 'oset';

where I use the function as follows:

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

The project builds without any errors. VSCode doesn't show me any errors either and intellisense correctly shows the imported function definition. However at runtime, I get the following error in the browser console:

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

The object that the error is referring to is SimulateAircraft which appears to be undefined. I have searched for quite a long time to try and find a solution. I have found similar errors and their solutions but I have not yet found a solution that solves my problem. I would really appreciate some help.

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/"
  }
}

Upvotes: 3

Views: 1993

Answers (1)

lina
lina

Reputation: 36

It may be too late, but try :

import * as aircraft from 'oset';

and then : 

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

Upvotes: 1

Related Questions