I'm importing my JavaScript "module" using the "dynamic import()" call:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Module</title><style>:root { background: #545454; }</style>
<script>
window.addEventListener('load', e => {
import('./script.js').then(async module => {
const fn = await module.myFunction();
fn.whatever();
});
});
</script>
</head>
<body></body></html>
and, this is the script.js file:
export async function myFunction() {
this.whatever = function () {
console.log('Ok');
};
return this;
}
By running it, Google Chrome complains that the "object is not extensible" while adding whatever:
script.js:2 Uncaught (in promise) TypeError: Cannot add property whatever, object is not extensible at Module.myFunction (script.js:2:19) at module.html:12:33
So, what's wrong and how to work around the issue?
module in the then callback on that import() is the module namespace object for the module. That's an object the JavaScript engine creates that has properties for the exports of the module. The MNO is not extensible; its purpose is to accurately reflect the exports of the module. If you could add properites to it (extend it), it wouldn't accurately reflect the module exports anymore.
When you call module.myFunction(), this during the call is set to module during the call — which is the non-extensible module namespace object. So the line this.whatever = ___ in myFunction fails, because that's trying to create a new property on a non-extensible object.
Just as an addition: It's not clear what you're trying to do with myFunction, but you could create a new object that uses the MNO as its prototype, and add a property to that.
export async function myFunction() {
const obj = Object.create(this);
obj.whatever = function () {
console.log("Ok");
};
return obj;
}
I wouldn't recommend doing that without a good reason (and I'd remove the async unless the function uses await), but it would work.