CODEWITHSUNDEEP
javascriptwebpackbabeljs
Josh
Josh

Reputation: 41

Unexpected token on assignment operator

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.

Upvotes: 2

Views: 433

Answers (1)

Joe Clay
Joe Clay

Reputation: 35817

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.

Upvotes: 2

Related Questions