When I compiled my TypeScript project I got the error: [ts] Module ‘”c:/dev/am/common/element/after-visible”‘ has not default export:
This was caused by the fact, that I forgot to surround “afterVisible” with “{ }”.
The contents of the after-visible.ts module was:
/**
* Check the DOM repeatedly to see if the given element is visible, when element is visible call given function.
*/
export
function afterVisible(selector: string, fn: (element?: HTMLElement) => void, interval: number = 10, retryCount: number = 30): void {
const element = <HTMLElement>document.querySelector(selector);
if (element) {
const elementIsVisible = element.offsetWidth > 0 && element.offsetHeight > 0;
if (elementIsVisible) {
fn(element);
return;
}
}
setTimeout(function afterVisibleSetTimeoutElapsed() {
if (retryCount === 0) {
if (console) {
console.log(`Element ‘${selector}‘ does not exist or was not visible.`);
}
} else {
// Try again
afterVisible(selector, fn, retryCount – 1, interval);
}
}, interval);
}
So when you want to use the function afterVisible in an other function you will have to import it like so:
import { afterVisible } from
“./after-visible”;
function focus(element: HTMLElement) {
element.focus();
}
/**
* Check the DOM repeatedly to see if the given element is visible, when element is visible focus it.
*/
export
function focusAfterVisible(selector: string, interval: number = 10, retryCount: number = 30): void {
afterVisible(selector, focus, interval, retryCount);
}