django-compressor Uncaught SyntaxError: import declarations may only appear at top level of a module

Question

This is my JS structure:

This is the beginning index.js

import { elements } from './views/base';
const state = {};
const controlRandomPhrasal = async () => {}

My base.js:

export const elements = {
    searchFrom: document.querySelector('.search'),
}

I invoke the compressor like this:

{% compress js %}
  <script src="{% static "phrasals/js/jquery.js" %}"></script>
  <script src="{% static "phrasals/js/index.js" %}"></script>
{% endcompress %}

How can I configure my project to avoid that error? Or can you suggest me an easier/better bundler?

Answer 1

After a while of being looking for a response. I choose to build my pipeline using Webpack and Babel. This is where I started: Hybrid application, Django-Webpack