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?
Advertisement
Answer
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.
// (Side note: `async` only makes sense on functions that use `await`. Perhaps
// you're using `await` in code that wasn't relevant to the question in which
// case that makes sense, but I thought I should flag it up in not and for
// others reading the code.)
export async function myFunction() {
const obj = Object.create(this);
obj.whatever = function () {
console.log("Ok");
};
return obj;
}
I’d suggest caution doing that with code you don’t control just because A) it’s using module exports as prototype methods which may have unintended consequences, and B) there may be a simpler, more well-supported way to do it with any given specific module. But it should work in most cases.