Brian J Brian J - 1 month ago 19
React JSX Question

Why is eslint throwing incorrect syntax error on module export file?

I'm using the react-router auth example to implement a login flow. In the setup I added the

auth.js
file to my utils folder. The file is using module.exports to allow it to be invoked from other files.

But when I build the solution it breaks on this file, telling me that:
Message:
Missing semicolon.
Details:
fileName: src\js\util\auth.js
lineNumber: 3


So I added the semicolon to the line 3,
cb = arguments[arguments.length - 1];

which then throws a subsequent ESLINT error telling me a semicolon is expected after this line
if (cb) cb(true)
which doesn't seem correct.

Question:

Why is ESLINT throwing incorrect syntax error on a valid module export file?

The auth.js file is detailed below as taken from the react-router example:

module.exports = {
login(email, pass, cb) {
cb = arguments[arguments.length - 1]
if (localStorage.token) {
if (cb) cb(true)
this.onChange(true)
return
}
pretendRequest(email, pass, (res) => {
if (res.authenticated) {
localStorage.token = res.token
if (cb) cb(true)
this.onChange(true)
} else {
if (cb) cb(false)
this.onChange(false)
}
})
},

getToken: function () {
return localStorage.token
},

logout: function (cb) {
delete localStorage.token
if (cb) cb()
this.onChange(false)
},

loggedIn: function () {
return !!localStorage.token
},

onChange: function () {}
}

function pretendRequest(email, pass, cb) {
setTimeout(() => {
if (email === 'joe@example.com' && pass === 'password1') {
cb({
authenticated: true,
token: Math.random().toString(36).substring(7)
})
} else {
cb({ authenticated: false })
}
}, 0)
}

Answer

This is because of the new ES6 feature Object literal shorthand. Try the following.

module.exports = {
  login: function login(email, pass,cb){ //need to give a name to the function, else, eslint will throw an error
   ...
  }
}