title: Django load ES6 javascript file
body: <p>I would like to use the import feature in ES6 in index.html in django.</p>
  
  <p>I do not want to compile to ES5 for browser compatibility. I would like to assume that all the users will have ES6 compatible browsers.</p>
  
  <p>Therefore I do not need a ES6 to ES5 compiler such as Babel: <a href="https://github.com/kottenator/django-compressor-toolkit" rel="noreferrer">https://github.com/kottenator/django-compressor-toolkit</a></p>
  
  <p>I simply would like to serve the ES6 Javascript and the browser to compile it if it can.</p>
  
  <p>I tried:</p>
  
  <pre><code>&lt;!-- Index.html --&gt;
  &lt;script type="module" src="{% static 'app.js' %}"&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>//app.js
  (function(){
    console.log("Hello from App.js");
  })();
  </code></pre>
  
  <hr>
  
  <pre><code># settings.py
  if DEBUG:
      import mimetypes
      mimetypes.add_type("module", ".js", True)
  </code></pre>
  
  <hr>
  
  <p>The error I get:</p>
  
  <blockquote>
    <p>Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.</p>
  </blockquote>
  
  <hr>
  
  <p><strong>Update 1:</strong> I tried:</p>
  
  <pre><code>&lt;script type="module" src="{% static 'app.js' %}"&gt;&lt;/script&gt;
  &lt;script nomodule  src="{% static 'app.js' %}"&gt;&lt;/script&gt;
  &lt;script type="module"&gt;import "{% static 'main.mjs' %}";&lt;/script&gt;
  </code></pre>
  
  <p><a href="https://developers.google.com/web/fundamentals/primers/modules" rel="noreferrer">https://developers.google.com/web/fundamentals/primers/modules</a></p>
  
  <hr>
  
  <p><strong>Update 2:</strong> Is it possible NOT to use a precompiler?</p>
  
  <p><a href="https://i.stack.imgur.com/UTUcC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UTUcC.png" alt="enter image description here"></a></p>
  
  <p><a href="https://github.com/kottenator/django-compressor-toolkit" rel="noreferrer">https://github.com/kottenator/django-compressor-toolkit</a></p>
  
  <p><strong>Update 3:</strong> I found</p>
  
  <p><a href="https://module-script-tests-sreyfhwvpq.now.sh/mime" rel="noreferrer">https://module-script-tests-sreyfhwvpq.now.sh/mime</a></p>
  
  <p><a href="https://i.stack.imgur.com/F8U8Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F8U8Y.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/51uQ5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/51uQ5.png" alt="enter image description here"></a></p>
  
  <p>And this is what I have: 
  <a href="https://i.stack.imgur.com/SZHO5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SZHO5.png" alt="enter image description here"></a></p>
  
  <p><strong>I use Chrome:</strong>
  Google Chrome is up to date
  Version 71.0.3578.98 (Official Build) (64-bit)</p>
  
  <p><strong>Update 4:</strong>
  I would like to use </p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;script type="module"&gt; instead of &lt;script type="text/javascript"&gt;
  </code></pre>
  
  <p>because I want to be able to import modules:</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;script type="application/javascript" src="{% static 'app.js' %}"&gt;&lt;/script&gt;
  
  //app.js
  import { print } from "{% static 'component.js' %}"
  </code></pre>
  
  <p>currently gives error:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token {</p>
  </blockquote>
  
  <hr>
  
  <p><strong>Update 5:</strong></p>
  
  <p>This is my file structure: </p>
  
  <p><a href="https://i.stack.imgur.com/bn6NC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bn6NC.png" alt="Update 5:"></a></p>
  
  <p>This is my Index:</p>
  
  <pre><code>{% extends 'base.html' %}
  {% block content %}
  {% load static from staticfiles %}
  &lt;h1&gt;Index&lt;/h1&gt;
  {% include 'component.html' %}
  &lt;script type="module" src="{% static 'app.js' %}"&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>This is my base.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;title&gt;Index&lt;/title&gt;
      {% load static from staticfiles %}
      &lt;link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      {% block content %}
      {% endblock %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my app.js: </p>
  
  <pre><code>import {A} from "./component.js"
  console.log("A" + A)
  </code></pre>
  
  <p>This is my component.js:</p>
  
  <pre><code>export const A = 42
  </code></pre>
  
  <p>This is the error I still get:</p>
  
  <blockquote>
    <p>Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.</p>
  </blockquote>
  
  <p>This is what I get for content type:</p>
  
  <p><a href="https://i.stack.imgur.com/3aoSt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3aoSt.png" alt="enter image description here"></a></p>