When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly.
Below is a simple test demonstrating this issue.
The following files are involved:
package.json
...
"main": "index.html"
...
index.html
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<div id="container_model_view" class="brd"></div>
<script>let exports = {};</script>
<script src="./main.js"></script>
</body>
</html>
main.ts (compiled into main.js before execution)
import {getEl} from './mod_test';
console.log(document.getElementById("container_model_view"));
console.log(getEl());
mod_test.ts
export function getEl() {
return document.getElementById("container_model_view");
}
Output:
div#container_model_view.brd //accessed from main.ts - successful
null //failed to access from mod_test.ts
I discovered that bundling main.js with rollup or webpack resolves the issue by merging both the main module and 'mod_test' module into one file. However, I am hesitant about this approach due to concerns about its impact on performance, not to mention it seems like an unnecessary additional step in the build process.