Django load ES6 javascript file

5
votes

I would like to use the import feature in ES6 in index.html in django.

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.

Therefore I do not need a ES6 to ES5 compiler such as Babel: https://github.com/kottenator/django-compressor-toolkit

I simply would like to serve the ES6 Javascript and the browser to compile it if it can.

I tried:

<!-- Index.html -->
<script type="module" src="{% static 'app.js' %}"></script>

//app.js
(function(){
  console.log("Hello from App.js");
})();

# settings.py
if DEBUG:
    import mimetypes
    mimetypes.add_type("module", ".js", True)

The error I get:

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.

Update 1: I tried:

<script type="module" src="{% static 'app.js' %}"></script>
<script nomodule  src="{% static 'app.js' %}"></script>
<script type="module">import "{% static 'main.mjs' %}";</script>

https://developers.google.com/web/fundamentals/primers/modules

Update 2: Is it possible NOT to use a precompiler?

enter image description here

https://github.com/kottenator/django-compressor-toolkit

Update 3: I found

https://module-script-tests-sreyfhwvpq.now.sh/mime

enter image description here enter image description here

And this is what I have: enter image description here

I use Chrome: Google Chrome is up to date Version 71.0.3578.98 (Official Build) (64-bit)

Update 4: I would like to use 

<!-- index.html -->
<script type="module"> instead of <script type="text/javascript">

because I want to be able to import modules:

<!-- index.html -->
<script type="application/javascript" src="{% static 'app.js' %}"></script>

//app.js
import { print } from "{% static 'component.js' %}"

currently gives error:

Uncaught SyntaxError: Unexpected token {

Update 5:

This is my file structure:

Update 5:

This is my Index:

{% extends 'base.html' %}
{% block content %}
{% load static from staticfiles %}
<h1>Index</h1>
{% include 'component.html' %}
<script type="module" src="{% static 'app.js' %}"></script>
{% endblock %}

This is my base.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Index</title>
    {% load static from staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

This is my app.js: 

import {A} from "./component.js"
console.log("A" + A)

This is my component.js:

export const A = 42

This is the error I still get:

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.

This is what I get for content type:

enter image description here

2
djangoecmascript-6django-templateses6-modulesdjango-staticfiles
The django-compressor-toolkit allows you to enable ES6 in Django project. I enable ES6 using this project. – shafik
Yes, but the compressor toolkit is there for converting ES6 to ES5. I should not have to convert it in modern browsers right? I would like to simply run the ES6 html code. – Vlad Otrocol

2 Answers

4
votes

I finally got it working.

This is what I needed to add to the settings.

if DEBUG:
    import mimetypes
    mimetypes.add_type("application/javascript", ".js", True)

The mistake I was making was that I was refreshing but no clearing cache while I was debugging.

If you debug network stuff always make sure to ctrl+F5 when you test.

enter image description here

If I comment the mimetype:

if DEBUG:
    import mimetypes
    #mimetypes.add_type("application/javascript", ".js", True)

Then I get the error:

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.

And I see this:

enter image description here

2
votes

I tested on my local environment. It's working fine. I follow these steps:

  1. In settings.py add this

    STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]

  2. In template use this and keep app.js in PROJECT_DIRECTORY/static/ folder.

  3. My app.js code written from https://raw.githubusercontent.com/benmvp/learning-es6/master/examples/es6/block-scoping.js

My html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="{% static 'app.js' %}"></script>
</body>
</html>

Update: I create a JS file test.js in static folder with the following code:

export const A = 42

I updated my previous app.js with the following code:

import {A} from "./test.js"

console.log("A" + A)

Then in template:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="module" src="{% static 'app.js' %}"></script>
</body>
</html>