Skip to content

"Parsing error: Unexpected token. Did you mean {'>'} or >?" when using arrow functions #1343

Closed
@major-mayer

Description

@major-mayer

Hi everyone,
I am struggling with this problem for days now, and simply can't find the right eslint configuration to fix this.
This is more or less what my code looks like:

<script lang="ts">
@Component
export default class Viewer extends Vue {
  engine : Engine| undefined = undefined;
  

  mounted() {
    const canvas = <HTMLCanvasElement> document.getElementById("renderCanvas"); // Get the canvas element
    this.engine = new Engine(canvas, true); // Generate the BABYLON 3D engine

    const scene = this.createScene(canvas); // Call the createScene function
    scene.clearColor = Color4.FromColor3(Color3.White()); // Set the background color

    // Register a render loop to repeatedly render the scene
    // ESLINT ERROR: Parsing error: Unexpected token. Did you mean `{'>'}` or `&gt;`?eslint
    this.engine.runRenderLoop(() => {
      scene.render();
    });

    //...
  }
};
</script>

I always get this weird parsing error where i declare the arrow function inside as a parameter for this.engine.runRenderLoop (a BabylonJS method if someone wonders).
This did not happen when i was not using the typescript parser.

Here is what my .eslint.js file looks like:

module.exports = {
  root: true,
  plugins: [
    "vue",
    "@typescript-eslint"
  ],
  env: {
    node: true,
  },

  extends: [
    "plugin:vue/essential",
    "@vue/airbnb",
    "@vue/typescript",
  ],

  //parser: "@typescript-eslint/parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "max-len": ["error", { code: 150 }],
    "no-param-reassign": 0,
    quotes: ["error", "double"],
  },

};

What i've already found out: When I uncomment the line parser: "@typescript-eslint/parser", the error disappears, but a lot of other error pop up, because apparently the typescript-eslint parser doesn't know anything about how .vue files are strutured.
Something like "Parsing error: Identifier expected." on a normal @wheel event listener in the template part.

What confuses me really is that other arrow functions do work, but just this one doesn't... I am really out of ideas.
Any help appreciated!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions