Flask: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

Question

Server: Python/Flask
OS: Ubuntu 18.04
Vanilla JS

    <script
      type="module"
      src="{{ url_for('static', filename='js/app.js') }}"
    ></script

I have included this script tag at the bottom of the body in the html. For some reasons, when I run the server locally with flask run, I the following error message in browser console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Why is the loading the wrong MIME-type. I am not even sure if there are more details that are relevant. I will do my best to fill in the blanks as best as I can.

Dan Neal · Accepted Answer · 2020-08-15 22:38:42Z

1

I found the solution. In Flask if you import files like so

import SomeClass from './utils'

then it will have the content-type in the header set to 'html/text' and it will error. To fix this import it like this:

import SomeClass from './utils.js'

and it will set the content-type header correctly

answered Aug 15, 2020 at 22:38

Dan Neal

619 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user14110791 · Accepted Answer · 2020-08-15 20:15:51Z

-1

I think adding crossorigin = "anonymous" will fix the problem.

I read that "Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching."

<script
    type="module"
    src="{{ url_for('static', filename='js/app.js') }}"
    crossorigin="anonymous"
></script>

answered Aug 15, 2020 at 20:15

user14110791

2 Comments

Dan Neal Over a year ago

Thanks for the advice, but no change for me :/

user14110791 Over a year ago

:( maybe this thread has the answer: stackoverflow.com/questions/54651811/…

Collectives™ on Stack Overflow

Flask: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related