The moment I included babel, the following snippet stopped working as before.
Perhaps it's because of the absence of a module bundler. I need react just for one UI component.
index.js
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#' + VIEWS.profile).innerText = 'profile'
})
index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="{% static 'network/index.js' %}"></script>
The querySelector query returns the target element when tested in console under the same execution context. Babel reports, You are using the in-browser Babel transformer. Be sure to precompile your scripts for production Moreover, babel makes it hard to debug js in the browser. Is there any way around this?
EDIT 1: moved the contents of index.js to the script tags
Problem persists, no change noticed.
EDIT 2: problem's cause identified
The event 'DOMContentLoaded' is dispatched before Babel compiles the javascript and appends it to the DOM. For the moment I am creating a custom event. Isn't there a way to listen for something like 'BabelCompilationComplete'?