I am currently moving over to using webpack, and have added this piece of code before the initialization of my app.
delete window.IntersectionObserver;
if (!('IntersectionObserver' in window)) {
console.log(`Load observer`);
import('/node_modules/intersection-observer/intersection-observer.js');
console.log(`Loaded`);
}
console.log(`Start`);
I delete the IntersectionObserver for testing purposes only.
But when I run the code I get the logs like Load observer -> Loaded -> Start
But as far as I know, import returns a promise, which means is should be async, or is this some different behaviour I am not familiar with?
I was expecting Load observer -> Start -> Loaded.
If you want to wait for the promise - you should put the second console.log inside a then() clause like this
delete window.IntersectionObserver;
if (!('IntersectionObserver' in window)) {
console.log(`Load observer`);
import('/node_modules/intersection-observer/intersection-observer.js').then(module => console.log(`Loaded`));
}
console.log(`Start`);
or use async/await like this
(async () =>
{
delete window.IntersectionObserver;
if (!('IntersectionObserver' in window)) {
console.log(`Load observer`);
await import('/node_modules/intersection-observer/intersection-observer.js');
console.log(`Loaded`);
}
console.log(`Start`);
})();