Issue ouverte · Issue #1000 Frontend components can start before their content is parsed · @rmdes
The app script is loaded with async defer (packages/frontend/layouts/default.njk:46). For a module script async wins, so the script can run while the page is still being parsed. It defines the custom elements, and an element that has been opened but not yet filled gets connectedCallback straight away: add-another looks for #add-button (components/add-another/index.js:27) before it exists, getElement throws, and the component never sets up.
It depends on timing, so it shows up on some loads and not others. To make it repeatable, I sent /posts/create?type=photo through a proxy that pauses for 1.5 s after the <add-another> start tag. With async defer:
No element matching #add-button
No element matching .file-input__progress
No element matching label
No element matching .label
No element matching .geo-input
and no add-another buttons. With defer alone: no errors, both buttons.
async came in with Stimulus (b9d05da), which waited for the document before connecting controllers; it became a problem when the components moved to custom elements (e.g. 914c8fd).