0
212
ViewsJavascipt loaded file dynamically but could not access constructor. X is not a constructor
I'm trying to get rid off import statements but want to dynamically load Javascript files.
I'm using this class to do it.
export function JSImport<T>(
importPromise: Promise<T>,
): Promise<T> {
// CommonJS's `module.exports` is wrapped as `default` in ESModule.
return importPromise.then((m: any) => (m.default || m) as T);
}
Anyway, when imported file has used to be with constructor parameters, I get error.
Here is the old usage (which works well):
declare let Tiff: any;
const tiff = new Tiff({buffer: xhr.response});
Here is the new usage:
const importTiff = JSImport(
import(/* webpackChunkName: "Tiff" */ 'Tiff'),
);
try {
importTiff.then((Tiff: any) => {
const tiff = new Tiff({buffer: xhr.response});
....
}
In new codeline, I get error which says that TypeError: Tiff is not a constructor
Tiff variable looks like this in Chrome console.
How to use it as a constructor ?
·
Juan Pablo Isaza
1 answers
Answer question0
The webpack dynamic import import(/* chunkNameHint */ "moduleName") really gives a module, that you identify as generic T in your JSImport function:
export function JSImport<T>(
importPromise: Promise<T>, // TypeScript infers T to be the output of the dynamic import, i.e. the full module
): Promise<T>
Instead of trying to automatically "unpack" the module (which may have a default and/or named exports), you can direclty use the dynamic import:
import(/* webpackChunkName: "Tiff" */ 'Tiff')
.then((module) => module.default) // Assuming the module has a default export and it is the one you need
.then((Tiff: any) => {
const tiff = new Tiff({buffer: xhr.response});
// ....
});
·
Juan Pablo Isaza
Report
Answer question