Menu
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?
https://github.com/kottenator/django-compressor-toolkit
Update 3: I found
https://module-script-tests-sreyfhwvpq.now.sh/mime
And this is what I have:
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:
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:
983
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.
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:
61
I tested on my local environment. It's working fine. I follow these steps:
In settings.py add this
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]
In template use this and keep app.js in PROJECT_DIRECTORY/static/ folder.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
