unexpected reference error

[Datadryft]

Unexcpected reference error with moveSlide function.
issue with the writing the project page. it seems to me the javascript is not loading in

 let slideIndex = 1;
showSlides(slideIndex)

function moveSlide(n) {
    slideIndex += n
    showSlides(slideIndex)
}

function showSlides(n) {
    let slides = document.getElementsByClassName("carousel-item")
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length;
    }

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"
    }
    slides[slideIndex - 1].style.display = "flex"
} 

 {% extends 'base.html' %}
{% load static %}

{% block title %}
  Project Page
{% endblock %}
{% block extrahead %}
  <link rel="stylesheet" href="{% static 'css/project.css' %}" />
{% endblock %}

{% block content %}
  <div class="project-card">
    <div class="project-info">
      <h1>{{ project.title }}</h1>
      <p>
        <a href="{{ project.link }}">Project Link</a>
      </p>
      <p>{{ project.description }}</p>
      <a href="{% url 'home' %}">Back to Home</a>
    </div>
    <div class="carousel">
      <div class="carousel-images">
        {% for image in project.images.all %}
          <div class="carousel-item">
            <img src="{{ image.image.url }}" alt="Project image" />
          </div>
        {% endfor %}
      </div>
      <a class="carousel-control prev" onclick="moveSlide(-1)">&#10094;</a>
      <a class="carousel-control next" onclick="moveSlide(1)">&#10095;</a>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'js/project.js' %}" defer></script>
{% endblock %}

[Datadryft]

The way to resolve this issue is to remove the extra_js block and move the script to the extra head block in the html project.html