search

fourkitchens / emulsify

DEPRECATED (see README for new version)
GNU General Public License v2.0
162 stars 70 forks source link

Loading JS with attach_library in unpredictable order. #341

Open mallezie opened 5 years ago

mallezie commented 5 years ago

emulsify version (see releases): 3.1 node version: 10.15.3 npm (or yarn) version: yarn 1.15.2 Problem description:

We created some components wich included local and 'vendor' based JS. When viewing these components we sometimes have errors that the other JS file ws not loaded yet.

For example this is how we define the library in swift_theme.libraries.yml

selectr: js: vendor/mobius1-selectr/dist/selectr.min.js: {} dist/01-atoms/05-forms/03-select/select.js: {} dependencies:

Where the first JS file is the selectr library, the second one our JS file related to the component.

In the component we attach the library using: {{ attach_library('theme/selectr') }}

What happens is that this sometimes works and sometimes it doesn't. This is in the generated patternlab site. On some page loads, the components looks as wanted him to look. On some page (about 50/50) loads however we see following console output (on the patternlab page): ReferenceError: Selectr is not defined

The error says the library is not included (yet). This makes us actually think that the loading of the JS is different sometimes. Since sometimes it works, sometimes it doesnt. Looking in the code and html we see that the script tags are added by the pl attach library function.

....

We also see the relaod.js converts those to correct script tags, and adds them to the footer.

I've tried experimenting with using defer and async for the script tags, or movin them to the header, but to no result. Any pointers here would be very appreciated.

welcome[bot] commented 5 years ago

Thanks for opening your first issue here! Be sure to follow the issue template!