Receiving 'invalid form: crispy' error when trying to use crispy forms filter on a form in Django, but only in one django app and not the other?

Question

When trying to use the crispy filter I receive an error:

django.template.exceptions.TemplateSyntaxError: Invalid filter: 'crispy'

I believe this is because Django can for some reason not locate the crispy filter, since when I put in the name of a filter that did not exist I received the same error.

I have used {% load crispy_forms_tags %} at the top of the html document and use {{ form|crispy }} to apply the filter. I have also added the 'crispy forms' app to the settings.py file, and installed the django-crispy-forms package with pip, which I can clearly see using pip freeze.

PLEASE NOTE that the crispy forms filter does work in a different django app for my website, even though I don't think I altered anything in that app's directory (but I could be wrong it's been awhile since I worked in that directory). I can't figure out what's different. I read something about filters attaching to the first app directory it can and that's it, but that info was vague, and when I removed the {% load crispy_forms_tags %} line from the template that used it, the crispy filter still wouldn't work in the new app.

This is the template.

{% extends "breed_identifier/base.html" %}
(% load crispy_forms_tags %)
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Join Today</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="border-top pt-3">
            <small class="text-muted">
                Already Have An Account? <a class="ml-2" href="#">Sign In</a>
            </small>
        </div>
    </div>
{% endblock content %}

This is in my settings.py file.

INSTALLED_APPS = [
    'users.apps.UsersConfig',
    'django.contrib.admin',
    'breed_identifier.apps.BreedIdentifierConfig',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
]

Answer 1

I had the same problem but was resolved after loading crispy {% load crispy_forms_tags %} form at the top of my templates

    {% extends 'base.html' %} {% block content %}
    {% load crispy_forms_tags %}

<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top">
      <div class="card-body">
        <h1>{% block title %} {{ post.title }} {% endblock title %}</h1>
        <p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
        <p class="card-text ">{{ post.content | safe }}</p>
      </div>
    </div>
    {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}

    <div class="col-md-8 card mb-4  mt-3 ">
      <div class="card-body">
        <!-- comments -->
        <h2>{{ comments.count }} comments</h2>

        {% for comment in comments %}
        <div class="comments" style="padding: 10px;">
          <p class="font-weight-bold">
            {{ comment.name }}
            <span class=" text-muted font-weight-normal">
              {{ comment.created_on }}
            </span>
          </p>
          {{ comment.body | linebreaks }}
        </div>
        {% endfor %}
      </div>
    </div>
    <div class="col-md-8 card mb-4  mt-3 ">
      <div class="card-body">
        {% if new_comment %}
        <div class="alert alert-success" role="alert">
          Your comment is awaiting moderation
        </div>
        {% else %}
        <h3>Leave a comment</h3>
    
        <form method="post" style="margin-top: 1.3em;">
          {{ comment_form | crispy }}
          {% csrf_token %}
          <button type="submit" class="btn btn-primary  btn-lg">Submit</button>
        </form>

        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}