TypeError: is not a function when calling class method

Question

Apologies if this is a really basic question, but I've been struggling to find an answer.

I am trying to call a method/function inside a class client side but when I try to call it, I get TypeError testFunction is not a function

The entry point is client.ts, which (to keep it simple for now) has a single export:

export * from "./Test"

Test.ts has a class and function:

export class TestClass {

    public testFunction() {

        // do stuff

    }

}

My webpack.config.js is as follows:

var webpack = require('webpack');

var argv = require('yargs').argv;

var debug = argv.debug !== undefined;

var config = [
    {
        entry: {
            client: [
                __dirname + '/src/scripts/client.ts'
            ]
        },
        mode: debug ? 'development' : 'production',
        output: {
            path: __dirname + '/dist/web/scripts',
            filename: '[name].js',
            libraryTarget: 'umd',
            library: 'webpack',
            publicPath: '/scripts/'
        },
        externals: {},
        devtool: 'source-map',
        resolve: {
            extensions: [".ts", ".tsx", ".js"],
            alias: {}
        },
        target: 'web',
        module: {
            rules: [{
                test: /\.tsx?$/,
                exclude: [/lib/, /dist/],
                loader: "ts-loader",
                options: {
                    configFile: "tsconfig-client.json"
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'public/fonts/[name].[ext]'
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            }
            ]
        },
        performance: {
            maxEntrypointSize: 400000,
            maxAssetSize: 400000,
            assetFilter: function (assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    }
];

module.exports = config;

I am them embedding this in the html page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>My Bookings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles/main.css">
</head>

<body>
    <script src="/scripts/client.js"></script>
    <script type='text/javascript'>
        webpack.TestClass.testFunction();
    </script>
</body>

</html>

Any pointers on what I am doing wrong would be great. If I browse the generated client.js I can see the class and method, so I am at a loss!

/*!*****************************!*\
  !*** ./src/scripts/Test.ts ***!
  \*****************************/
/*! namespace exports */
/*! export TestClass [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "TestClass": () => /* binding */ TestClass
/* harmony export */ });
var TestClass = /** @class */ (function () {
    function TestClass() {
    }
    TestClass.prototype.testFunction = function () {
        // do stuff
    };
    return TestClass;
}());

TestClass, the class (actualy a function when transpiled, as you can see in your bottom snippet), does not have any property called testFunction. It is instances of the class that have this function property. (Via TestClass.prototype.) — Robin Zigmond
– Robin Zigmond, Commented Nov 9, 2020 at 22:01
Ah yes, how did I not spot that. Sorry for the silly question! — Lee Ford
– Lee Ford, Commented Nov 10, 2020 at 9:41

Jeremy Caney · Accepted Answer · 2020-11-09 23:50:08Z

2

The problem is that you are trying to call a non-static method directly from TestClass instead of creating a new instance of TestClass first.

You need to either call the testFunction method on a new instance of TestClass or declare the testFunction method as a static method.

edited Nov 9, 2020 at 23:50

Jeremy Caney

7,798115 gold badges58 silver badges87 bronze badges

answered Nov 9, 2020 at 22:05

Elijah Enuem-Udogu

3061 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lee Ford Over a year ago

Yep, that works. Not sure how I missed that bit, I've been using classes elsewhere for a while!

Collectives™ on Stack Overflow

TypeError: is not a function when calling class method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related