SyntaxError using Babel and JSX when using class

Question

I'm trying to create classes using webpack, babel and jsx

import Observable from '../../observable';


abstract class AbstractClient implements Observable  {
    var _name: string,
    var _config: object,

    function constructor(config: object) : variant,

    ...
}
export default AbstractClient;

And here is the error I get:

ERROR in ./app/adapter/AbstractAdapter/aclient.jsx
Module build failed: SyntaxError: /home/vinz243/Documents/nTorrent/app/adapter/AbstractAdapter/aclient.jsx: Unexpected token (5:9)
  3 | 
  4 | 
> 5 | abstract class AbstractClient implements Observable  {
    |          ^
  6 |   var _name: string,
  7 |   var _config: object,
  8 |

My babel presets

 presets:['es2015','stage-0','react']

I believe `'react'` needs to come first in your presets list. — Mike Cluck, Dec 16 '15 at 17:24
@MikeC I assume it doesn't change anthing it worked well before with react templates and so — Vinz243, Dec 16 '15 at 17:25
Your code is Typescript, Babel does not know how to handle that. — loganfsmyth, Dec 16 '15 at 17:46
Are you trying to use typescript or pure ES2015? If you want to use typescript, you should use a typescript loader in webpack instead of the babel loader I assume you are using. — Dustin Hodges, Dec 16 '15 at 18:00
I am using JSX I believe. https://jsx.github.io/doc/tutorial.html#classes-and-interfaces — Vinz243, Dec 16 '15 at 21:08
Oh that's confusing. You are trying to use a language called JSX, which appears to be unrelated to React's JSX markup format. This definitely isn't going to work in Babel. It also looks a lot like typescript. — loganfsmyth, Dec 17 '15 at 01:48
Ah. Why the hell do they give the same name to two different things but with same nature and same purpose? Thanks for clarifying this! — Vinz243, Dec 17 '15 at 08:23

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

There's no syntax support in ES2015 for abstract classes, that's why you get an unexpected token error. abstract is not a keyword in es2015 either, so the interpreter is probably interpreting abstract as a variable name.

There are methods of implementing an abstract class pattern in Javascript.

edited May 23 '17 at 12:23

Community

1
1

answered Dec 16 '15 at 17:44

Dustin Hodges

4,110
3
26
41

You're not wrong, but there're more to it. This is Typescript, not ES6. – loganfsmyth Dec 16 '15 at 17:48
You are right, I should have noticed because OP is using implements as well. Confusing as there's a jsx tag instead of typescript. Probably OP is confused as well – Dustin Hodges Dec 16 '15 at 17:58

SyntaxError using Babel and JSX when using class

1 Answers1