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:
- core/drupal
css:
theme:
vendor/mobius1-selectr/dist/selectr.min.css: {}
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.
<script data-name="reload" data-src="/vendor/mobius1-selectr/dist/selectr.min.js"></script>
<script data-name="reload" data-src="/dist/01-atoms/05-forms/03-select/select.js"></script>
....
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.
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:
- core/drupal
css:
theme:
vendor/mobius1-selectr/dist/selectr.min.css: {}
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.