figure out compressor/javascript module issue where nested imports from the local repo aren't compiled

[smcalilly]

Description

Django compressor fails when trying to compile HTML which sources a vanilla JS file that imports a local JS module. (IDK how to write that rn out without breaking a brain, so see code example in the Create a new app with the Django cookiecutter section.)

I recieved variations of this error:

compressor.exceptions.FilterError: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (3:0) while parsing /static/js/renderWWTPTable.js while parsing file: /static/js/renderWWTPTable.js

And:

   File "/usr/local/lib/python3.10/site-packages/compressor/filters/base.py", line 200, in input
    raise FilterError(err)
compressor.exceptions.FilterError: 
/static/js/renderWWTPTable.js:1
import { buildWWTPTable } from './buildWWTPTable'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

They all had the 'import' and 'export' may appear only with 'sourceType: module'. There's a lot going on here and I'm not sure which part is broken. There's Django compressor, babelify, browserify, and JavaScript modules. I attempted to fix this with babelify configuration but I've spent too much time debugging this and need to pickup the issue with R&D now that I have a working but not ideal solution.

This happened in a few of different places.

• First, running a test via github actions. This was strange because my tests passed locally and I had no problem compiling the code in the browser. I'm not sure the compressor was running locally, and it's perplexing that it somehow turned on in my test environment since I had hardly no configuration.
  • Here's an example: https://github.com/datamade/il-nwss-dashboard/runs/7961017141?check_suite_focus=true
• Locally with the same repo, but only after I setup offline compression.
• Locally with a fresh version of the app created via the Django cookiecutter, but only after I configured offline compression

Steps to reproduce

1. Create a new app with the Django cookiecutter

It should have two files like this:

• helloworld.js
• base.js

helloworld.js is imported into base.js. base.js is used in the HTML like this:

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

2. Setup offline compression

Turn on Django offline compression. Here's an example: https://github.com/datamade/ucb-cales/commit/2861a38272f70e7b33d482ae321020cc7a6d841c

Try to build the app. You should get this error:

=> ERROR [12/12] RUN python manage.py compress                                                                 1.9s
------

 > [12/12] RUN python manage.py compress:
#16 1.757 CommandError: An error occurred during rendering dbug/index.html:
#16 1.757 /static/js/base.c9d84219cb06.js:1
#16 1.757 import { helloWorld } from "./helloworld"
#16 1.757 ^
#16 1.757 ParseError: 'import' and 'export' may appear only with 'sourceType: module'
#16 1.757 Compressing...
------
executor failed running [/bin/sh -c python manage.py compress]: exit code: 1
ERROR: Service 'app' failed to build : Build failed

[hancush]

Ok, we had this same issue with chi-land-sales, and we fixed it by adding the --global flag to the babelify subcommand, so our commands looked like this:

COMPRESS_PRECOMPILERS = (
    (
        "module",
        "export NODE_PATH=/app/node_modules && npx browserify {infile} -t [ babelify --global --presets [ @babel/preset-env ] ] > {outfile}",
    ),
    (
        "text/jsx",
        "export NODE_PATH=/app/node_modules && npx browserify {infile} -t [ babelify --global --presets [ @babel/preset-env @babel/preset-react ] ] > {outfile}",
    ),
)

[smcalilly]

@hancush did y'all have the problem with react or vanilla js? i tried the global flag in both the il-nwss-dashboard repo and the fresh repo from the cookiecutter, but still had the same problem. il nwss code for reference

[hancush]

@smcalilly React

[smcalilly]

good info! weird that it would work for react but not vanilla js.

[smcalilly]

this gave me a hunch. i removed the browserify-css from the command chain and it fixed the vanilla js... so much for all that work to figure out #236

[derekeder]

Related to #291

[smcalilly]

this should no longer be an issue once we incorporate webpack.