Is it possible to use a full URL in a dynamic import() statement in ES6/Typescript?
import('https://foo.com/mymodule.js').then(() => {
console.log('mymodule is loaded');
});
I get an error
//Cannot find module 'https://foo.com/mymodule.js'.
With Webpack and Typescript, we're already successfully using a relative path with a dynamic import
import(/* webpackChunkName: "mymodule" */ '../mymodule');
so it seems that Webpack already does module loading at runtime.
ES2020 introduces a new function-like syntax for import, so-called "dynamic imports" permitting the dynamic import of JavaScript modules. The precise implementation of the importing process is left to the host (eg the browser, or Node.js), but modern web browsers do implement dynamic loading over HTTP using this syntax, with the module identified using a URL:
// foo.js at example.com
export function foo() {
return 'this is foo'
}
// bar.js, running in the client
const { foo } = await import('http://example.com/my-module.js')
foo() // "this is foo"
Note that there are CORS and MIME-type constraints that you need to bear in mind. This and that are relevant.
import(/* webpackIgnore: true */'...') - see webpack.js.org/api/module-methods/#magic-comments –
Represent Pure ES6 module without bundler
Most of the browsers now support ES6 modules natively.
You need to define type="module" in the script tag.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="module">
import camelCase from "http://localhost:40080/camelCase.js";
import * as systemX from "https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.4/system.js";
console.log(systemX);
console.log(camelCase);
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Alternatively, you can link to file as well.
<!-- move all previoous code to main.js -->
<script type="module" src="./main.js"></script>
Further reading:
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
Webpack
I tested the below trick and it works.
import(/* webpackIgnore: true */ 'http://example.com/some-module/some-module.bundle.js').then(module => console.log(module.default));
https://github.com/webpack/webpack/issues/8341#issuecomment-436550381
**Please note that CORS must be allowed from the webserver for both use cases.
ES modules aren't guaranteed to support URLs neither in static import nor in dynamic import(). Current browser versions (Chrome-based, Firefox, Safari) support URLs for both static and dynamic import, the implementation relies on CORS mechanism and may vary. Node.js supports this only with custom ESM loader, it's unlikely that it will allow this by default in future because of security concerns.
It may be possible to handle HTTP transport in Webpack via third-party plugin.
Script loading can be handled by SystemJS:
System.config({
paths: {
'mymodule': 'https://example.com/mymodule.js'
}
});
System.import('mymodule')
.then(mymodule => {
...
})
.catch(error => console.error(error));
Or:
System.import('https://example.com/mymodule.js')
.then(mymodule => {
...
})
.catch(error => console.error(error));
SystemJS also provides capabilities to process loaded scripts when necessary, e.g. a way in which modules should be handled in these scripts.
System.import('https://example.com/mymodule.js') is not working and is throwing me and error at build time: Module not found: Error: Can't resolve 'https://example.com/mymodule.js' 🤔 –
Rete System.import –
Rete System['import'](...) or let SystemJs = System; SystemJs.import(...) to disable it or check webpack.js.org/api/module-methods/#magic-comments –
Johnnajohnnie ES modules don't support URLs neither in static import nor in dynamic import(). The "function" syntax of import(<url>) supports URLs. –
Amman © 2022 - 2024 — McMap. All rights reserved.
eval. – Kutch