How to handle files using imports in a javascript file being minified with type="module"

[sanderese]

Hi there,

I'm importing a file called main.js into my template. In this file I import some stuff from mdbootstrap

import { Tooltip } from "../mdbootstrap/src/mdb/js/free/tooltip"; import { Modal } from "../mdbootstrap/src/mdb/js/free/modal";

In my template I try to compress it:

{% compress js %}
<script src="{% static 'landingpage/main.js' %}" type="module"></script>
{% endcompress %}

Since I'm using imports in the main.js file I'm required to use type="module", but that raises the following exception:

Couldn't find any precompiler in COMPRESS_PRECOMPILERS setting for mimetype 'module'.

In the readthedocs it says there's no default for COMPRESS_PRECOMPILERS but it does work out of the box for "regular (read no import) javascript.

How should I configure my settings to work with type="module"? Or am I using a wrong approach to begin with?

Any help is appreciated!

[carltongibson]

Generally you want to set COMPRESS_PRECOMPILERS to point to your preferred JS pipeline.

e.g. I have this in one project...

COMPRESS_PRECOMPILERS = (
    ("text/x-tailwind", POSTCSS_TAILWIND_COMMAND),
    ("text/x-elm", ELM_MAKE_COMMAND),
)

Where POSTCSS_TAILWIND_COMMAND and ELM_MAKE_COMMAND just pass-off to postcss a elm make respectively. You can substitute web pack or parcel or esbuild or ... as you need.

I hope that helps.

[sanderese]

Thanks Carl!

With your help I figured it out eventually. For people interested in my solution:

I installed esbuild (globally) for the packaging of the javascript file

npm install -g esbuild

Then in my settings.py file I specified the following:

COMPRESS_PRECOMPILERS = (
    ('text/javascript', 'esbuild {infile} --bundle --outfile={outfile}'),
    ('module', 'esbuild {infile} --bundle --outfile={outfile}')
)

It works like a charm.

[rjbullock]

What if you want to just minify the module and not use an external tool? For example, I'm trying to just use compressor.filters.jsmin.rJSMinFilter but it fails...

[Richdark]

@rjbullock
Hi, did you find a solution for this by any chance?

[Andrioden]

Here is a more fullworthy answer:

installing

npm install esbuild
pip install django_compressor

settings.py

BASE_DIR = Path(__file__).resolve().parent.parent

# This is cross-os friendly
esbuild_path = os.path.join(BASE_DIR, "node_modules", ".bin", "esbuild")

COMPRESS_PRECOMPILERS = (
    ("text/javascript", f"{esbuild_path} {{infile}} --bundle --outfile={{outfile}}"),
    ("module", f"{esbuild_path} {{infile}} --bundle --outfile={{outfile}}"),
)

some.html

{% load compress %}

{% compress js %}
   <script src="{{ STATIC_URL }main.js" type="module"></script>
{% endcompress %}

main.js

import { InitGame } from './init/game.js'

// Here using jquery's document.ready shorthand `$(..` for startup trigger
$(async function() {
    await InitGame.init(initial_game_data_json)
})