Typescript declared static class method is not a function

Question

I created an es6 library for some of my projects.

When I import this library all static functions raise an error.

This is an example.

My Class (es6) :

class JsonSerializer {
    static toJson(node) { /* some code */ }
}

export default JsonSerializer

Typescript definition file :

export class JsonSerializer {
    static toJson(root: Node): any

    static fromJson(config: any): Node
}

I import my class like this

import {JsonSerializer} from 'ls-serializer'

When I try to use toJson static method.

And its give me following error :

_lsSerializer.JsonSerializer.toJson is not a function

I've same error for all static method.

Did I miss something ?

EDIT

This is my library webpack config :

const path = require('path');

module.exports = {

    entry : {
        serializer : './src/serializer.js'
    },

    output : {
        path     : path.resolve(__dirname, 'dist'),
        filename : '[name].bundle.js',
        libraryTarget: 'commonjs-module'
    },

    resolve : {
        extensions : ['.js', '.jsx'],

        alias : {
            '@' : path.resolve(__dirname, 'src'),
            '~' : path.resolve(__dirname, 'examples')
        }
    },

    devServer : {
        contentBase : path.resolve(__dirname, 'dist'),
        compress    : true,
        port        : 9000
    },

    module : {
        rules : [{
            test    : /\.(js|jsx)$/,
            exclude : /node_modules/,
            loader  : 'babel-loader'
        }, {
            test : /\.(html)$/,
            use  : {
                loader  : 'html-loader',
                options : {
                    attrs : [':data-src']
                }
            }
        }]
    },

    devtool : 'source-map',

    mode : 'development'
};

And this is ./src/serializer.jsfile code :

import JsonSerializer from './serializers/JsonSerializer'

export {
    JsonSerializer, /* other exports*/
}

@briosheje This is an output when I try to run my unit tests with Jest. I've same error on browser console : TypeError: ls_serializer__WEBPACK_IMPORTED_MODULE_3__.JsonSerializer.toJson is not a function — amiceli
– amiceli, Commented Apr 2, 2019 at 11:49
@Arfeo I import JsonSerializer and I call toJson method like this : const res = JsonSerializer.toJson(currentNode). — amiceli
– amiceli, Commented Apr 2, 2019 at 11:51
Euuuuuh that's a weird import. Can you please share the webpack configuration and the package.json? — briosheje
– briosheje, Commented Apr 2, 2019 at 11:51

ttulka · Accepted Answer · 2019-04-02 11:52:22Z

2

I guess the file with the class is called ls-serializer.ts.

You have to use it like this:

import JsonSerializer from './ls-serializer'

JsonSerializer.toJson(...)

Or you can avoid default:

// ls-serializer.ts
export class JsonSerializer {
    static toJson(node) { /* some code */ }
}

And export the class like this:

import {JsonSerializer} from './ls-serializer'

JsonSerializer.toJson(...)

answered Apr 2, 2019 at 11:52

ttulka

11k7 gold badges46 silver badges57 bronze badges

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

4 Comments

amiceli Over a year ago

JsonSerializer class is in JsonSerializer.js file. ls-serializer is my library name. I added more information about my library on top.

ttulka Over a year ago

@amiceli The import statement is still wrong, you have to import it without {} while exported with default.

amiceli Over a year ago

I've edit my example, I think is less confusing now. I now difference between import with and without {}

ttulka Over a year ago

@amiceli There is still import {JsonSerializer} in the question's code...

amiceli · Accepted Answer · 2019-04-02 12:23:06Z

-1

I've found the problem and it's a little pitiful...

In my code toJson method is named toJSON with capitalize part... And in camel case in my typescript declaration file.

answered Apr 2, 2019 at 12:23

amiceli

4655 gold badges12 silver badges29 bronze badges

Collectives™ on Stack Overflow

Typescript declared static class method is not a function

EDIT

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related