Error from the console (below)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.
{% extends 'common.html' %}
{% load static %}
... (Some blocks of code)
{% block javascript %}
<script type="module" src="{% static 'js/product.js' %}"></script>
{% endblock %}
// Import the Logger instance
import logMessage from './logger.js';
// Set the log level
logMessage.setLogLevel("info");
const dataRules = {...}
Could anyone help me in solving this issue, Please!
Is this a production or development environment?
What do you see in the logs for the requests for those files?
Where do those files reside? (What directory?)
Hi Ken,
It is a development environment where I installed whitenoise library to serve static file in production.
Django console logs
I have observed this issue only with the scripts which is having type=module attribute.
An HTTP 304 is a “Not Modified” response. That means the browser is trying to retrieve it from cache. (You can look at the network tab in your browser tools to confirm the requests and responses.)
Either make sure your browser cache is clear or try this in an incognito window.
Note, please don’t post images when they’re not necessary. Things like console logs or directory listings should be posted as text. (Fenced by ``` like you’ve done with your code above.)
[23/Dec/2023 18:29:12] "GET /static/styles/product.css HTTP/1.1" 200 9317
[23/Dec/2023 18:29:12] "GET /static/toastr_files/toastr.min.js HTTP/1.1" 200 5545
[23/Dec/2023 18:29:12] "GET /static/styles/internet_status.css HTTP/1.1" 200 1329
[23/Dec/2023 18:29:12] "GET /static/js/jquery.min.js HTTP/1.1" 200 89501
[23/Dec/2023 18:29:12] "GET /static/js/product.js HTTP/1.1" 200 16720
[23/Dec/2023 18:29:12] "GET /static/fontawesome/css/all.css HTTP/1.1" 200 120727
[23/Dec/2023 18:29:12] "GET /media/gaming_products/clash-of-clans.jpg HTTP/1.1" 200 26200
[23/Dec/2023 18:29:12] "GET /static/images/bharat_bargains.gif HTTP/1.1" 200 10456760
[23/Dec/2023 18:29:12] "GET /static/fontawesome/webfonts/fa-solid-900.woff2 HTTP/1.1" 200 122760
[23/Dec/2023 18:29:13] "GET /static/images/bharat_bargains.gif HTTP/1.1" 200 10456760
And you’re still getting the error?
What is the network tab in the browser showing you for the request for product.js?
Have you confirmed that the product.js file in your js directory is the correct file?
General Section
Request URL: http://127.0.0.1:8000/static/js/product.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: same-origin
Response Headers
HTTP/1.1 200 OK
Date: Sat, 23 Dec 2023 12:59:12 GMT
Server: WSGIServer/0.2 CPython/3.8.0
Content-Type: text/plain
Content-Length: 16720
Content-Disposition: inline; filename="product.js"
Last-Modified: Sat, 23 Dec 2023 12:41:49 GMT
Request Headers
GET /static/js/product.js HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en
Cache-Control: no-cache
Connection: keep-alive
Host: 127.0.0.1:8000
Origin: http://127.0.0.1:8000
Pragma: no-cache
Referer: http://127.0.0.1:8000/product/01d6c984-cf6a-4b3a-a139-e8626523d2ac/
Sec-Fetch-Dest: script
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120", "Brave";v="120"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
The weird thing is the same code is working in development machine. Later I pushed the code into new machine. In the new machine I am getting this error (below)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
But in previous development machine this issue is not coming even after pushing the code.
# Whitenoise MIME types configuration
WHITENOISE_MIMETYPES = {
'.js': 'application/javascript',
}
# Whitenoise static files storage
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
I followed the documentation but same issue again
On Django 4.2+:
STORAGES = {
# ...
"staticfiles": {
"BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
},
}
In my django settings.py file there is not STORAGE variable by default. Could you tell what is other data I need to add into the STORAGE?
I wouldn’t know what you might need for your deployment.
See Settings | Django documentation | Django for information about what that setting is used for.
Finally I solved the issue on reading the docs Using WhiteNoise with Django - WhiteNoise 6.6.0 documentation
Thank you, Ken!
