-
|
Hi, I am trying to integrate the x-sort plugin into my application, but I’ve encountered a few issues related to the loading order of Alpine.js. When Alpine.js is loaded before the body is parsed, I receive a warning in the console suggesting that I should defer the loading of Alpine.js until after the body is fully parsed. However, according to the documentation for the x-sort plugin here, the plugin does not work unless it is loaded before the entire page is rendered. This indicates that deferring the script loading will not yield immediate results, whereas removing the defer keyword allows the sorting functionality to work as expected. Additionally, I observed similar behavior when using ES modules. For instance, the following code works correctly: import Alpine from 'alpinejs';
import sort from '@alpinejs/sort';
Alpine.plugin(sort);
window['Alpine'] = Alpine;
Alpine.start();However, if I change it to this: import Alpine from 'alpinejs';
import sort from '@alpinejs/sort';
Alpine.plugin(sort);
window['Alpine'] = Alpine;
window.addEventListener('DOMContentLoaded', () => {
Alpine.start();
});The sorting functionality fails to work. I am using following versions: Could you please provide guidance on how to resolve these loading order issues with the x-sort plugin in Alpine.js? Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
both of those do the same thing. You should just do the first, and have the entry point be Also, maybe
It does not say that anywhere in the documentation. |
Beta Was this translation helpful? Give feedback.
-
|
@ekwoka I dont think both of them do the same thing. As far as I can see the start function does following: export function start() {
if (started) warn('Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.')
started = true
if (! document.body) warn('Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine\'s `<script>` tag?')
dispatch(document, 'alpine:init')
dispatch(document, 'alpine:initializing')
startObservingMutations()
onElAdded(el => initTree(el, walk))
onElRemoved(el => destroyTree(el))
onAttributesAdded((el, attrs) => {
directives(el, attrs).forEach(handle => handle())
})
let outNestedComponents = el => ! closestRoot(el.parentElement, true)
Array.from(document.querySelectorAll(allSelectors().join(',')))
.filter(outNestedComponents)
.forEach(el => {
initTree(el)
})
dispatch(document, 'alpine:initialized')
setTimeout(() => {
warnAboutMissingPlugins()
})
}The start function inside does not have any logic in terms of when to load. So there is a difference between calling it before and after dom load. I am also not sure if there is an issue with documentation I mentioned above . The original example in documentation simply does not work out of the box becasue of the load order. So unless there is a bug something must be wrong in docu as it states that both alpinejs and sort plugin must be loaded after content is parsed (defered). |
Beta Was this translation helpful? Give feedback.
-
|
You call start after the Dom is loaded. By making your scripts modules or defer
Yes it does.
That's correct. The Docs say that, and thats true. And its not about loading. It's that |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the support, I think this was an issue with cache. Everything works for some reason now |
Beta Was this translation helpful? Give feedback.
You call start after the Dom is loaded.
By making your scripts modules or defer
Yes it does.
That's correct. The Docs say that, and thats true.
And its not about loading.
It's that
Alpine.start()needs to be called only once the DOM is ready, or it will have issues.