Update 3.x initialization instructions to defer start() until after window load #1508

clinejj · 2021-06-15T21:57:14Z

clinejj
Jun 15, 2021

I ran into an issue following the 2.x->3.x upgrade guide related to initialization. With our Rails/Webpack application, Alpine.start() needed to be deferred until after window load otherwise we'd receive this error:

Alpine Warning: Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in

The code used in our import was:

// Rails/turbo imports

import Alpine from 'alpinejs';

Rails.start();
ActiveStorage.start();

Alpine.start();

This was fixed by wrapping Alpine.start() like so:

// Rails/turbo imports

import Alpine from 'alpinejs';

Rails.start();
ActiveStorage.start();

window.addEventListener('load', () => {
  Alpine.start();
});

It may be helpful to add a note in the upgrade guide in case others run into this issue.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update 3.x initialization instructions to defer start() until after window load #1508

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Update 3.x initialization instructions to defer start() until after window load #1508

Uh oh!

clinejj Jun 15, 2021

Replies: 0 comments

clinejj
Jun 15, 2021