Fix: TypeScript error Module ‘…’ has no default export

 

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);

}

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *