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

[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!

[ota-meshi]

I think you need to rewrite it as follows:

- const canvas = <HTMLCanvasElement> document.getElementById("renderCanvas"); // Get the canvas element
+ const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; // Get the canvas element

Or, change the setting of "@typescript-eslint/parser" to instruct not to use JSX.

[major-mayer]

Thanks a lot, both of your recommandations did indeed work.
I'm not exactly sure why this error happened in the first place, according to this documentation, the default value for jsx should be false, but i had to explicitly turn it off.

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

Edit: also adding my tsconfig.json to the parser options did help. Maybe that was lost at some point

[unclebay143]

For anyone facing this issue: I uninstalled prettier, restart VScode, and re-install prettier and everything works fine. This is the second time this happened and that same step resolved it.

[Praneeth-1995]

Hello everyone,
I have a problem regarding "error Parsing error: Unexpected token" in line:41. Can anyone please help me to find the solution to how to resolve the Unexpected token in the above line:41?
All the installations are up-to-date and I tried a few times to restart the task but still, the same error is appearing in the code.

[FloEdelmann]

Your Order function is invalid JavaScript. There are commas indicating that it should be an object instead.

[Praneeth-1995]

Your Order function is invalid JavaScript. There are commas indicating that it should be an object instead.

Thank you, I got it

[vincerubinetti]

I'm still running into this issue just trying to write a basic identity arrow function in typescript:

const identity = <T>(t: T) => t;

Parsing error: Unexpected token. Did you mean {'>'} or >? eslint

But if I write it in traditional function format, the error goes away.

[FloEdelmann]

Have you updated @typescript-eslint/parser and typescript to their latest versions?

[vincerubinetti]

I was a few minor versions behind on @typescript-eslint/parser, upgrading seems to have fixed it, thank you!

[mazensabry2712]

{["aa","bb","cc","dd"]}.map((item) => {
return( <article key={'item'} className=" card">

Parsing error: Unexpected token >. Did you mean > or {">"}?

[john-opennet]

it fixed in my case, below is the diff

- const someFunc = <D>(data: D): void => { console.log() };
+ const someFunc = <D, >(data: D): void => { console.log() };

it works for

"vue": "^2.7.10",
"eslint": "^8.56.0",
"eslint-plugin-vue": "^9.19.2",
"typescript": "^4.2.4",

[FloEdelmann]

Please don't comment on this issue; it was closed 3 years ago. I'll lock the conversation now, please open new issues instead, and please follow the respective issue templates.

For anyone using TypeScript: Please see https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser.