"Parsing error: Unexpected token. Did you mean
<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 `>`?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.
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!
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 elementOr, change the setting of "@typescript-eslint/parser" to instruct not to use JSX.
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
Pashkella, reed665, blazpeterlin, tonkunz, Philou-py, sprakash57, Anubarak, kkuegler, zhengwu119, kingyue737, and 5 more reacted with thumbs up emoji
tonkunz and gajosadrian reacted with rocket emoji
All reactions
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.
Your Order function is invalid JavaScript. There are commas indicating that it should be an object instead.
Thank you, I got it
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.
