0

I have looked around in Stackoverflow and the ESLint docs for an answer, but most are not what I need since they pertain to React.

I am using Node v14.17.0, and ESLint v7.32.0 as a dev dependency. I have the following piece of code.

class Service {
  constructor(){
    this.numbers = [1,2,3];
  }

  doAnotherThing = () => {
    console.log("I do the thing after 100 millis", this.numbers);
  }
  
  doSomething(){
    setTimeout(this.doAnotherThing, 100);
  }
}

let service = new Service();
service.doSomething();

Simply running node test.js runs the application fine and I get the expected result printed to STDOUT.

All sounds good, let me add ESLint and the eslint config file.

{
  "env": {
      "node": true,
      "mocha": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest"
  },
}

Now run when I run eslint on the file, I get the following error.

/test.js
  2:10  error  Parsing error: Unexpected token =

Keep in mind I am NOT using Babel or any transpiling, so do I need to specify a variable or something in the config? Why is this error happening and why does installing @babel/eslint-parser solve the issue? I am not using Babel at all. Is this a limit to ESLint or simply something I don't understand?

Using a regular method(){} does NOT work and is not the solution since I lose the this.number value. See: https://jsfiddle.net/0crpx6bv

Reading around I see a lot of React and NONE Node.js solutions. This is plain Node without Babel and not in React.

HappyZombies
  • 15
  • 4
  • `method() { ... }` should work, that's the [proper syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions). –  Sep 29 '21 at 15:31
  • 2
    eslint probably doesn't support that syntax, you may have to install an alternative parser (`babel-eslint` maybe) – Pointy Sep 29 '21 at 15:31
  • @ChrisG well you're probably right that it would work, but it's semantically quite different. – Pointy Sep 29 '21 at 15:31
  • 1
    [How do I configure ESLint to allow fat arrow class methods](https://stackoverflow.com/questions/34244888/how-do-i-configure-eslint-to-allow-fat-arrow-class-methods) – Andreas Sep 29 '21 at 15:31
  • 1
    @Pointy True, but we don't know if OP is aware of the official syntax or actually needs the different binding –  Sep 29 '21 at 15:32
  • @ChrisG @Pointy -- That link that was provided basically says install the babel plugin, which while works, doesn't make sense to me since I am not using Babel in my project at all. `method() {}` works, but then I need to call .bind all the time. I want the arrow functions in class field properties, because they’re autobinding my methods. I need to keep the `this` reference in what I am trying to do.@Andreas -- If it's not official snytax, then why does it run fine in node 14 without Babel or anything. – HappyZombies Sep 29 '21 at 16:04
  • `but then I need to call .bind all the time` can you clarify this? https://jsfiddle.net/tnu1Lr70/ works without binding –  Sep 29 '21 at 16:13
  • The example I gave was a simple example....there are instances where in async and callback behavior, the `this` reference is lost. Example 1: https://jsfiddle.net/0crpx6bv/ of `this.numbers` being undefined. Example 2: https://jsfiddle.net/0crpx6bv/1/ of `this.numbers` having its value because of the fat arrow, you will also notice that despite all the syntax errors, it actually still runs. Now I am back here with ESLint, which doesn't like my example 2. So perhaps this is just an issue with the linter in itself? – HappyZombies Sep 29 '21 at 16:27
  • It is a linter issue, yes. You can either use `setTimeout(() => this.doAnotherThing(), 100)` or change the linter. –  Sep 29 '21 at 17:18

0 Answers0