Search code examples
djangodjango-compressor

Django-compressor js files not working when COMPRESS_ENABLED = True

When I leave COMPRESS_ENABLED = False, everything works fine but the js files I'm loading aren't compressed.

However, if I set COMPRESS_ENABLED = True, the compressed file appears to compress and load properly. The problem is, the libraries I'm compressing aren't loading properly. For instance, I'm getting $ is not defined errors for jQuery.

The only clue I can see is that I'm getting an Uncaught SyntaxError: Unexpected identifier error on line one of my compressed file. What do I need to do to allow this compressed file to be read by the browser?

Thanks!

My settings file is:

COMPRESS_ENABLED = True

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
)

HTML is:

{% load compress %}

{% compress js %}
    <script type="text/javascript" src="/static/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/static/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/react/react.min.js"></script>
    <script type="text/javascript" src="/static/jquery-cookie/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/image-picker/image-picker.min.js"></script>
{% endcompress %}
Solution

  • Exclude minified js and css files from compressor and problem will be solved. (Solved by @Timmy O'Manhony comment)

    {% load compress %}
<script type="text/javascript" src="/static/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/static/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/react/react.min.js"></script>
    <script type="text/javascript" src="/static/image-picker/image-picker.min.js"></script>
{% compress js %}
    <script type="text/javascript" src="/static/jquery-cookie/jquery.cookie.js"></script>
{% endcompress %}