Unexpected token on assignment operator

Question

Trying to transpile a javascript with babel/webpack fails on an "=" symbol. Any ideas why this might happen would be greatly appriciated.

import auth0 from './auth0-js'
import { AUTH_CONFIG } from './auth0-variables'


export default class AuthService
{
   auth0=new auth0.WebAuth({
      domain: AUTH_CONFIG.domain,
      clientID: AUTH_CONFIG.clientId,
      redirectUri: AUTH_CONFIG.callbackUrl,
      audience: `https://${AUTH_CONFIG.domain}/userinfo`,
      responseType: 'token id_token',
      scope: 'openid'
    })
}

So, in the example above, the auth0= part won't transpile with babel/webpack.

This is not valid javascript. What are you trying to do? Should you move that code in the constructor and assign it to the object? — Axnyff
– Axnyff, Commented Nov 30, 2017 at 0:16
The issue is that you don't know javascript class syntax - I would've expected to see constructor() { this.auth0= ... your code ... } — Jaromanda X
– Jaromanda X, Commented Nov 30, 2017 at 0:16
I tried that. I was following the example here: auth0.com/docs/quickstart/spa/vuejs/01-login — Josh
– Josh, Commented Nov 30, 2017 at 0:21
@Josh, the example seems to be broken then - the fact that in login it refers to this.auth0 suggests what I expected in my first comment — Jaromanda X
– Jaromanda X, Commented Nov 30, 2017 at 0:25

Joe Clay · Accepted Answer · 2018-08-03 13:01:55Z

The issue isn't with your code - it's with the tutorial not being clear enough about what you need installed for it to compile. It's using the experimental class fields syntax, which is not supported by browsers yet, and currently requires a Babel plugin if you wish to use it.

If you look at the .babelrc for the example code, you can see they're using the following presets:

"presets": [
    ["env", { "modules": false }],
    "stage-2"
],

The stage-2 preset contains plugins for all proposed JavaScript features that are at Stage 2 or higher of the standardisation process - class fields are at Stage 3, so they're included.

Class fields are fairly safe to use, as they're very likely to be added to the spec in the next few years - that said, if you don't want to use experimental features, you can fall back on the standard ES2015 class syntax:

export default class AuthService {
    constructor() {
       this.auth0 = new auth0.WebAuth({
            domain: AUTH_CONFIG.domain,
            clientID: AUTH_CONFIG.clientId,
            redirectUri: AUTH_CONFIG.callbackUrl,
            audience: `https://${AUTH_CONFIG.domain}/userinfo`,
            responseType: 'token id_token',
            scope: 'openid'
       });
    }
}

EDIT:

It's worth noting that the Babel team now recommends using the individual plugins over the stage presets - they plan to stop publishing the latter once Babel 7 releases. See their blog post for the rationale behind this.

Collectives™ on Stack Overflow

Unexpected token on assignment operator

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related