Issue with CKEditor 6.7.0 not displaying in Heroku deployment. It currently works perfectly on localhost with no console error messages. It should render on Heroku as well, since as it is called in requirements.txt and correct syntax seems to be used.
the key error message is in the console which was discovered through debugging steps
Failed to load resource: the server responded with a status of 404 (Not Found)
ckeditor-init.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
coach-matrix-d2cd1e717f81.herokuapp.com/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
coach-matrix-d2cd1e717f81.herokuapp.com/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
/favicon.ico:1
Failed to load resource: the server responded with a status of 404 (Not Found)
debugging steps
inspecting the page on heroku
<div class="container">
<!-- If there is no primary key, we are creating a new question -->
<h2>Ask a Question</h2>
<form method="post" action="/ask_question/">
<input type="hidden" name="csrfmiddlewaretoken" value="Xhq7PrqzWagKDSpNDbdMmIUZwWSRQo4TZYzHeCasEyemlqb5Xpwf6vectROc1n8w">
<div id="div_id_subject" class="form-group"> <label for="id_subject" class=" requiredField">
Enter your question heading here<span class="asteriskField">*</span> </label> <div> <input type="text" name="subject" maxlength="100" class="textinput textInput form-control" required id="id_subject"> <small id="hint_id_subject" class="form-text text-muted">Enter a subject line for your question.</small> </div> </div> <div id="div_id_content" class="form-group"> <label for="id_content" class=" requiredField">
Content<span class="asteriskField">*</span> </label> <div> <div class="django-ckeditor-widget" data-field-id="id_content" style="display: inline-block;"> <textarea name="content" cols="40" rows="10" maxlength="10000" class="ckeditorwidget form-control" required id="id_content" data-processed="0" data-config="{"skin": "moono-lisa", "toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "toolbar": "Full", "height": 291, "width": "100%", "filebrowserWindowWidth": 940, "filebrowserWindowHeight": 725, "language": "en-us"}" data-external-plugin-resources="[]" data-id="id_content" data-type="ckeditortype"></textarea>
</div> <small id="hint_id_content" class="form-text text-muted">Enter the main body of your question.</small> </div> </div> <div id="div_id_standards" class="form-group"> <!--[...]-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
the " is a html entity for a double quote. This is a clue that the problem is in the template.
comparing the page on localhost
it appears that the problem area is crispy forms. Note that it renders correctly in localhost.
{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
{% if form.instance.pk %}
<!-- If the form instance has a primary key, we are updating an existing question -->
<h2>Update Your Question</h2>
<form method="post" action="{% url 'question_update' slug=form.instance.slug %}">
{% else %}
<!-- If there is no primary key, we are creating a new question -->
<h2>Ask a Question</h2>
<form method="post" action="{% url 'ask_question' %}">
{% endif %}
{% csrf_token %}
{{ form|crispy }}<!-- access the form object and apply the crispy filter -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}
comparing with forms.py
It is clear that CKEditorWidget() is not rendering correctly when deployed to heroku. This is the only difference between the two forms. The form on localhost is rendering correctly, so the problem must be in the CKEditorWidget().
class QuestionForm(forms.ModelForm):
"""
Form for asking a question. The user can enter a subject line and the main body of the question. They can also tag the question with up to 3 standards.
"""
subject = forms.CharField(
max_length=100,
required=True,
label='Enter your question heading here', # Update the label here
help_text='Enter a subject line for your question.' # comparing with the html in heroku, seems to render correctly up to here.
)
content = forms.CharField(
widget=CKEditorWidget(), # this is the line that is causing the problem
max_length=10000,
required=True,
help_text='Enter the main body of your question.'
) # Use CKeditor widget for content
standards = forms.ModelMultipleChoiceField( # seems to render ok from here.
queryset=TeachingStandardTag.objects.all(),
required=False,
widget=forms.CheckboxSelectMultiple,
help_text='Select the standard(s) for which you are asking the question.'
)
class Meta:
"""
the Meta class is used to specify the model to which the form is associated and the fields from the model you want the form to include.
"""
model = Question # Specifies the model in models.py associated with this form
fields = ['subject', 'content', 'standards']
check collectstatic to see if the problem is with static files
before changing forms.py, I will investigate collectstatic to see if the problem was with static files.
I checked the static files in settings.py - all working correctly
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
run collectstatic locally
I ran collectstatic with python3 manage.py collectstatic.
gitpod /workspace/Classroom-Matrix (main) $ python3 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings.
[...]
0 static files copied, 1676 post-processed.
It does seem to be alot of static files
deployment via heroku terminal
there deployment seemed ok
gitpod /workspace/Classroom-Matrix (main) $ git push heroku main
Enumerating objects: 661, done.
Counting objects: 100% (661/661), done.
Delta compression using up to 16 threads
Compressing objects: 100% (462/462), done.
Writing objects: 100% (661/661), 112.09 KiB | 10.19 MiB/s, done.
Total 661 (delta 381), reused 382 (delta 180), pack-reused 0
remote: Resolving deltas: 100% (381/381), done.
remote: Updated 107 paths from 0e57089
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-22 stack
remote: -----> Using buildpack: heroku/python
remote: -----> Python app detected
remote: -----> No Python version was specified. Using the same version as the last build: python-3.11.6
remote: To use a different version, see: https://devcenter.heroku.com/articles/python-runtimes
remote: !
remote: ! A Python security update is available! Upgrade as soon as possible to: python-3.11.7
remote: ! See: https://devcenter.heroku.com/articles/python-runtimes
remote: !
remote: -----> No change in requirements detected, installing from cache
remote: -----> Using cached install of python-3.11.6
remote: -----> Installing pip 23.3.1, setuptools 68.2.2 and wheel 0.42.0
remote: -----> Installing SQLite3
remote: -----> Installing requirements with pip
remote: -----> $ python manage.py collectstatic --noinput
remote: 0 static files copied, 1569 post-processed.
remote:
remote: -----> Discovering process types
remote: Procfile declares types -> release, web
remote:
remote: -----> Compressing...
remote: Done: 43.3M
remote: -----> Launching...
remote: ! Release command declared: this new release will not be available until the command succeeds.
remote: Released v84
remote: https://coach-matrix-d2cd1e717f81.herokuapp.com/ deployed to Heroku
tried finding static files on heroku
gitpod /workspace/Classroom-Matrix (main) $ heroku run bash
Running bash on ⬢ coach-matrix... up, run.8876 (Eco)
~ $ cd staticfiles
bash: cd: staticfiles: No such file or directory
~ $ ls
coachmatrix Codeinstitute.md db.sqlite3 main_forum manage.py Procfile requirements.txt runtime.txt static templates users
~ $
there seems to be no file or directory on heroku but this could be a misconception.
run collectstatic on heroku with verbose output
heroku run python manage.py collectstatic --noinput -v 3
of the 1569 post-processed files, ckeditor seems to comprise most of them
check ckeditor version on heroku and localhost
using pip freeze and heroku pip freeze, both seem to have django-ckeditor==6.7.0
check python versions on heroku and localhost
Local runs Python 3.9.17
Heroku runs Python 3.11.6
according to heroku they only support one of these
Supported Runtimes
update local python version
run touch runtime.txt && echo "python-3.9.18" > runtime.txt in terminal
still doesn't work
new console error spotted regarding MIME
it appears that MIME type ('text/html') is not executable. Full console error is documented at the begginning of this post.
Failed to load resource: the server responded with a status of 404 (Not Found)
summernote.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
ask_question/:1 Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_summernote/summernote.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
jquery.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_summernote/jquery.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_summernote/summernote.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ckeditor-init.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:1 Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_summernote/summernote.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
remove all type="text/html" (or javascript) from base.html
this still did not change the error message even though it was suggested in deployment
tried downgradeing ckeditor to 5.9.0
did not change MIME
is there a way to disable strict MIME checking?
this is not advisable as it's an important security feature
inspect console error in localhost
new console error spotted in localhost
Failed to load resource: the server responded with a status of 404 (Not Found)
summernote.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
summernote.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
ckeditor.js:21 [CKEDITOR] Error code: exportpdf-no-token-url.
(anonymous) @ ckeditor.js:21
ckeditor.js:21 [CKEDITOR] For more information about this error go to https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#exportpdf-no-token-url
(anonymous) @ ckeditor.js:21
ask_question/:1 Access to XMLHttpRequest at 'https://cke4.ckeditor.com/ckeditor4-secure-version/versions.json?v=4.22.1' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
cke4.ckeditor.com/ckeditor4-secure-version/versions.json?v=4.22.1:1
Failed to load resource: net::ERR_FAILED
summernote.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
deleted django-summernote from all code
there were related error messages in local console. After deletion, there are now no error messages in console
however upon deployment error message still remains. It seems to indicate a MIME error message even though text/html type has been removed.
Home Page:
coach-matrix-d2cd1e717f81.herokuapp.com/:115
GET https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js net::ERR_ABORTED 404 (Not Found)
coach-matrix-d2cd1e717f81.herokuapp.com/:114
GET https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js net::ERR_ABORTED 404 (Not Found)
coach-matrix-d2cd1e717f81.herokuapp.com/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
coach-matrix-d2cd1e717f81.herokuapp.com/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Ask Question Page (CKEditor doesn't display at all, instead plain form input box):
ask_question/:139
GET https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js net::ERR_ABORTED 404 (Not Found)
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor-init.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:140
GET https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js net::ERR_ABORTED 404 (Not Found)
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/ckeditor/ckeditor/ckeditor.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.