index.js：12 SyntaxError：意外的令牌“<”、“<！DOCTYPE “...不是有效的 JSON

问：

我无法使用我创建的静态 API。我正确地遵循了路径，但它给出了这个错误。我不知道如何解决这个问题，我尝试了无数种方法，但没有用

索引.js：

import Container from "react-bootstrap/esm/Container";
import Row from "react-bootstrap/esm/Row";
import Col from "react-bootstrap/esm/Col";
import Navegacao from "../../Componentes/Navegacao";
import HeaderBiografia from "../../Componentes/Header";
import NavegacaoHeader from "../../Componentes/NavegacaoHeader";
import * as React from "react";
import Tendencias from "../../Componentes/Tendencias";
import "./secao-famosos.css";

function SecaoFamosos() {
  fetch("../../ColecaoDeDados/ColecaodeDados.json")
    .then((res) => res.json())
    .then((res) => console.log(res))
    .catch((err) => console.error(err));

  return (
    <Container fluid className="text-light">
      <Row className="justify-content-center">
        <Navegacao Row={Row} Col={Col} />
        <Col
          xs={12}
          sm={12}
          md={9}
          lg={9}
          xl={9}
          xxl={9}
          className="m-5 pb-4 rounded-3"
        >
          <HeaderBiografia Row={Row} Col={Col} />
          <NavegacaoHeader Row={Row} Col={Col} />
          <main className="mw-100 ms-2">
            <Row
              className="
            mt-5 flex-column flex-sm-row-reverse  
            align-items-center align-items-sm-start align-items-md-start
             align-items-lg-start align-items-xl-start align-items-xxl-start 
             justify-content-center"
            >
              <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={6}>
                <Tendencias Row={Row} Col={Col} />
              </Col>
              <Col xs={7} sm={6} md={6} lg={6} xl={6} xxl={6}>
                <h2 className="fs-1 text-center mb-5 mb-sm-5 d-none">
                  Famosos Próximos
                </h2>
                <Row className="justify-content-center">
                  <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
                    <div>
                      <h3 className="fs-3 text-center">Semelhantes</h3>

                      {/* {dadosArtistasSemelhantes.map((artista, id) => (
                        <DadosArtistas
                          key={id}
                          imagem={artista.imagem}
                          nome={artista.nome}
                        />
                      ))}

                      <h3 className="fs-3 text-center mt-5">Influências</h3>
                      {dadosArtistasInfluencas.map((artista, id) => (
                        <DadosArtistas
                          key={id}
                          imagem={artista.imagem}
                          nome={artista.nome}
                        />
                      ))} */}
                    </div>
                  </Col>

                  <Col
                    xs={12}
                    sm={12}
                    md={12}
                    lg={6}
                    xl={6}
                    xxl={6}
                    className="d-flex flex-column"
                  >
                    <h3 className="fs-3 text-center">Parcerias</h3>
                    {/* <DadosArtistas
                      imagem={dadoParceria.imagem}
                      nome={dadoParceria.nome}
                    />

                    <h3 className="fs-3 text-center mt-5">Amigos/Familias</h3>
                    {dadosArtistasAmigosEFamilias.map((artista, id) => (
                      <DadosArtistas
                        key={id}
                        imagem={artista.imagem}
                        nome={artista.nome}
                      />
                    ))}
                    <h3 className="fs-3 text-center mt-5">Amor</h3>
                    <DadosArtistas
                      imagem={dadoArtistaAmor.imagem}
                      nome={dadoArtistaAmor.nome} */}
                    {/* /> */}
                  </Col>
                </Row>
              </Col>
            </Row>
          </main>
        </Col>
      </Row>
    </Container>
  );
}
export default SecaoFamosos;

json格式：

{
  "semelhantes": [
    {
      "imagem": "../Assets/beyonce.jpg",
      "nome": "Beyoncé Knowles"
    },
    {
      "imagem": "../Assets/drake.jpg",
      "nome": "Drake"
    },
    {
      "imagem": "../Assets/negrali.jpg",
      "nome": "Negra Li"
    },
    {
      "imagem": "../Assets/jayz.jpg",
      "nome": "Jay-Z"
    },
    {
      "imagem": "../Assets/tyga.jpg",
      "nome": "Tyga"
    },
    {
      "imagem": "../Assets/rihanna.jpg",
      "nome": "Rihanna"
    }
  ],
  "influencias": [
    {
      "imagem": "../Assets/guime.jpg",
      "nome": "MC Guimê"
    },
    {
      "imagem": "../Assets/ritaora.jpg",
      "nome": "Rita Ora"
    }
  ],
  "parcerias": {
    "imagem": "../Assets/brunomars.jpg",
    "nome": "Bruno Mars"
  },
  "amigosEFamilias": [
    {
      "imagem": "../Assets/ladygaga.jpg",
      "nome": "Lady Gaga"
    },
    {
      "imagem": "../Assets/khloekardashian.jpg",
      "nome": "Khloé Kardashian"
    },
    {
      "imagem": "../Assets/caitynjenner.jpg",
      "nome": "Caityn Jenner"
    },
    {
      "imagem": "../Assets/kendalljenner.jpg",
      "nome": "Kendall Jenner"
    },
    {
      "imagem": "../Assets/kimkardashian.jpg",
      "nome": "Kim Kardashian"
    }
  ],
  "amor": {
    "imagem": "../Assets/kyliejenner.jpg",
    "nome": "Kylie Jenner"
  }
}

我尝试更改获取文件的路径，我检查了JSON数据是否正确，但此问题仍然存在。