It seems that the load event is not triggering when I use await for an IndexedDB opening at the top level within an indirectly loaded module.
Interestingly, if I remove the await, the load handler works as expected. Similarly, replacing the openDB call with a dummy promise also results in the load handler being called as expected.
I'm puzzled by this behavior and wondering how to debug it.
index.html:
...
<script type="module" src="js/ui_index.js" type="javascript/module"></script>
...
(which includes an importmap for correct imports)
ui_index.js:
import * as db from "database";
...
window.addEventListener('load', () => console.log('onload'));
console.log('ui');
database.js:
import { openDB } from "lib/idb";
// ↓↓↓↓↓ *** THIS AWAIT ***
const db = await openDB("my-database-name", 4, {
upgrade(db, old_ver, new_ver, tx) {
console.log(`db.upgrade ${old_ver}→${new_ver}`);
}
}
console.log('db:', db);
The idb module used here is a promises-based IndexedDB wrapper created by Jake Archibald.
Console output with await:
db.upgrade 4→5
db: Proxy { <target>: IDBDatabase, <handler>: {…} }
ui
Console output without await:
db: Promise { <state>: "pending" }
ui
onload
db.upgrade 5→6
(The line mentioning db.upgrade only appears when incrementing the DB version in the openDB call, and does not impact the onload behavior).
Currently testing this in Firefox 120; other browsers have not been tested. This web app is intended for internal use and will be specifically designed for use with Firefox.