sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Alpine.js defer race condition — blank pages on first load
Some checks failed
CI / ruff (push) Successful in 9s
Details
CI / dependency-scanning (push) Successful in 29s
Details
CI / docs (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details
CI / pytest (push) Failing after 46m20s
Details
CI / validate (push) Successful in 24s
Details

Browse Source 
Dynamic script creation (document.createElement) ignores the defer
attribute per HTML spec — scripts are async regardless. Alpine.js CDN
loaded fast and auto-initialized before page scripts had executed,
causing ReferenceError for x-data functions (adminStores, dark,
isSideMenuOpen, etc.) and blank pages.

Fix: Replace dynamic script creation with static <script defer> tags
and move extra_scripts block BEFORE Alpine.js in all 4 base templates
(admin, store, merchant, storefront). Alpine.js is now always the last
deferred script, ensuring all page functions are defined before it
auto-initializes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-02-27 11:22:29 +01:00
parent 30c4593e0f
commit 2b29867093
4 changed files with 23 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/templates/store/base.html
View File

@@ -94,26 +94,11 @@
<!-- 7. SEVENTH: Upgrade Prompts (depends on API Client, registers with Alpine) -->
<script defer src="{{ url_for('billing_static', path='shared/js/upgrade-prompts.js') }}"></script>
<!-- 8. EIGHTH: Alpine.js v3 with CDN fallback (with defer) -->
<script>
(function() {
var script = document.createElement('script');
script.defer = true;
script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js';
script.onerror = function() {
console.warn('Alpine.js CDN failed, loading local copy...');
var fallbackScript = document.createElement('script');
fallbackScript.defer = true;
fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
document.head.appendChild(fallbackScript);
};
document.head.appendChild(script);
})();
</script>
<!-- 9. LAST: Page-specific scripts -->
<!-- 8. Page-specific scripts (MUST load before Alpine.js) -->
{% block extra_scripts %}{% endblock %}
<!-- 9. LAST: Alpine.js v3 (must be last defer script — auto-initializes on load) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"
onerror="var s=document.createElement('script');s.defer=true;s.src='{{ url_for('static', path='shared/js/lib/alpine.min.js') }}';document.head.appendChild(s);"></script>
</body>
</html>