"[Class] is not a constructor" error using JsonServiceClient

#1

I am creating a React/Redux application using Typescript 2.1.4 and ES6 (using babel-polyfill and webpack).

I get the following error when attempting to call any API method using JsonServiceClient:

Uncaught (in promise) TypeError: Failed to fetch, thrown from line #264 (JsonServiceClient.send)

I noticed that in Fiddler it appears that the JsonServiceClient is attempting to pass its payload to http://localhost:8088/json/reply/Object , which led me to take a look at the way that I was invoking the POST.

I was creating an instance of message class like this :

which produce the following output :

if I change my code to the following :

then I get the following error :

Uncaught (in promise) TypeError: WEBPACK_IMPORTED_MODULE_3__models_go_People_dtos.GetPerson is not a constructor

I have a feeling that this might be an ES6/Typescript compatibility issue (I cannot downgrade the version of Typescript to output ES5 because I am using generator functions with redux-saga), but I am not sure how to work around it (without losing the use of the automatically generated ServiceStack dtos).

Please can you assist?

my generated DTO class looks like this (just in case) :

#2

Could you show how you are importing GetPerson for use? I’m not familiar with ES6 + WebPack, so flying a bit blind sorry.

Do you know if the following is valid for both?

var request: GetPerson = GetPerson.constructor();

If not, do you know what syntax is valid if you change the DTOs manually?

#3

import looks like this:

image.png779Ă—27 9.09 KB

the syntax you described is valid, amending my code to the following:

produce exactly the same error :

image.png816Ă—162 36.3 KB

#4

What if try to write in dto

export default class GetPerson

instead of export class GetPerson

Does this help?

#5

PS: changing my import statement to :

produces the same error.

the generated JavaScript looks like this (which is why the error is occurring, I think) :

#6

Does dropping the new so it is just var request: GetPerson.constructor () work?

Problem with using default export is I think you can only have 1 per file/module which wouldnt work for dto generation.

#7

output changes slightly, but the error remains the same :

#8

@xplicit : in addition to layoric’s point, this would also mean that I am editing the auto-generated dto file (which means I’ll have to re-do the changes every time the API changes)

#9

@RyanMBritton what I wanted to check with default export is this webpack import/export issue or does not relate to webpack.

#10

@RyanMBritton Can you create a small sample which demonstrates the issue so we would look into solution and see what can be done to resolve the issue

#11

I managed to get this working and thought I would share the solution for closure, and in case someone else struggles with this.

WebPack uses a number of “loaders” to complete the JavaScript packaging process. One of these is a typescript loader (awesome-typescript-loader) which uses tsc.exe to compile the Typescript into compliant ES5 JavaScript. This loader relies on the presence of a babel.rc file to configure the conversion process, which was missing in my project (the configuration was sitting in the package.json file in my project, which it does not check).

As a result the generated JavaScript was erroneous…

not a ServiceStack issue - but good to know, nonetheless…

2 Likes
#12

Thanks for sharing your solution!