Parsing error: Unexpected token, expected “…”

I have this code with template literals inside component and I’m getting parsing error from ESLint. I tried to use @babel/eslint-parser but it doesn’t help. Also with this Parsing error: Unexpected token, expected “…” I have ‘…’ expected.ts(1005)

import React from "react";
import { Link } from "react-router-dom";
import logo from "../../images/logo_cl.png";

function Comptetition({ competition }) {
    return (
        <Link to {`/competitions/${competition.id}`}>
            <li className="complist__item">
                <img className="complist__item-image" src={logo} alt="item" />
                <p className="complist__item-name">{competition.name}</p>
                <p className="complist__item-country">{competition.area.name}</p>
            </li>
        </Link>
        
    );
}

export default Comptetition;

my .eslintrc.json looks like this:

    {
  "env": {
    "browser": true,
    "jest": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "import",
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "requireConfigFile": false,
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "babelOptions": {
      "presets": [
        "@babel/preset-react"
      ]
    }
  },
  "rules": {
    "semi": "error",
    "no-console": "warn",
    "no-eval": "error",
    "import/first": "error",
    "prefer-template": 1,
    "no-param-reassign": [
      2,
      {
        "props": false
      }
    ]
  }
}

I’ve already read lot of info but cannot resolve this error in VScode

Answer

From the code it looks like you’re looking at the correct line but the wrong place.

You’re missing a “=” for value to “to” prop of the Link

<Link to={`/competitions/${competition.id}`}>