toolbar.js was blocked because of a dissallowed MIME type ("text/plain")

[JamieSharpe]

Hello,

I have followed each step from this guide.

However the toolbar will not appear.

Inspecting the HTML of a webpage when the django server is running in debug mode confirms that the panels are present; although hidden.

Modifying the CSS confirms that the base panel can be displayed as well:

Django is returning a HTTP 200 status on the files required:

I found that the problem lies with the javascript file was not loading due to it's MIME type:

I am able to resolve this by importing the javascript file directly within my own templates; Note that this is without the 'type="module"' attribute:

After reloading the webpage, the toolbar works as expected. This is only a temporary fix to the real issue which was intruduced at these commits #1 and #2.

[JamieSharpe]

I am sorry for the duplicate #1336. I should have searched beforehand.
Reading the previous issue comments and the django official ones, I can understand why this may not be resolved at the django or debug_toolbar level.

However, what if the filetype for the Javascript modules were changed from ".js" to ".mjs"?

This is documented, and encouraged by Mozilla and V8 engine.

Changing the filenames from ".js" to ".mjs" resolves this issue when tested on Windows; which is where the problem lies. If it also works on a UNIX OS then I propose this is a solution.

[matthiask]

Since we're discussing moving to JavaScript modules (see #1350) that may be a viable solution to this problem.

On the other hand, a documentation patch just landed in the Django repository addressing the problem with Windows and JavaScript files django/django@f87b0ec

My /etc/mime.types file contains both js and mjs for application/javascript files so it should work. I think we should only use *.mjs if the content really is a JavaScript module though.