I used the module in my testing, and I want to simulate it in UI(like HTML canvas), but I had no idea to did it, is there have easy to do?
because SystemJS is trying to follow the spec - dynamic loading of import maps isn't currently supported in the spec itself
it's something we could support with mutation observers though, and a PR for an extra to do this in core would likely be accepted
let me know if that answers your question
and found out that it is not as easy as expected
<script>
System.register('mybundle', [], function () {
'use strict';
return {
execute: function () {
console.log('breave heart');
}
};
});
setTimeout(function(){
System.import('mybundle').then(console.log).catch(console.log)
}, 5000)
</script>
when i read the code i think that has something to do with translating the specifier into a url
but i have no idea what exactly that would look like
found also a stackoverflow question about this https://stackoverflow.com/questions/44869560/system-js-right-way-to-load-registered-modules
Hi, I am experiencing an issue related to using a script tag with type=system-js-module. The system js module script has a dependency on another script that is loaded with a script tag using defer, and from reading MDN docs it is my understanding that...
"Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating."
However I am seeing errors thrown from the system js module telling me that the deferred script has not executed.
I thought that the type=system-js-module style of modules were not fired until DOMContentLoaded but when looking at the src it appears that straight after the event listener is attached the modules are loaded anyway.
if (hasDocument) {
window.addEventListener('error', function (evt) {
lastWindowErrorUrl = evt.filename;
lastWindowError = evt.error;
});
window.addEventListener('DOMContentLoaded', loadScriptModules);
loadScriptModules();
}
function loadScriptModules() {
[].forEach.call(
document.querySelectorAll('script[type=systemjs-module]'), function (script) {
if (script.src) {
System.import(script.src.slice(0, 7) === 'import:' ? script.src.slice(7) : resolveUrl(script.src, baseUrl));
}
});
}
@guybedford ^^ ?
but the set will as you found out may or may not get uesed
depends on your code
@eddneal we do both because we want to ensure scripts are loaded as soon as possible. This does bring up an interesting feature idea though, if we should support eg
defer on type=systemjs-module for your use case. I would in general think that this would be unadvisable though since any delay = direct performance issues for the user (especially since these scripts aren't preloaded by the browser preloader as it does not understnad them).
1 reply
Perhaps you could explain a little more about your use case why this is necessary
@stevenvachon
System.set should be set with full URLs usually if you can. prepareImport is just for loading the import map initially. Updating the import map after that prepareImport is a use case we have yet to support, but are currently matching what browser import maps provide.
4 replies
It does support dynamic injection before the first module load, but so does systemjs
After the first module load they are frozen
I’ve created http://github.com/guybedford/import-maps-extensions to get movement on new spec work for these sorts of cases
Will post to WICG when import maps unflag
so, then you wouldn't be interested in a PR
@guybedford if you're aware of any hacks i can use (i'm using jest), please post them to the github issue i created
Hello everyone. I need help. I'm using systemJS with import map inside my react application to load certain external modules (micro front end modules) . I have configured cors in my webpack-dev-server. Still it's throwing cors access not allowed error. Any idea, on how to fix it?
@hiaparna I'm using same single-spa for microfrint end, but getting cors error when importing modules using systemJS. Can you please help me, on how you did it.
or you use serviceworkers
both are good methods
ehm sorry
serviceworkers :)
thats the right term
@jari_germeraad_gitlab custom headers aren't supported for script tags in browsers, but you could do this by using a fetch loader and then cutomizing the fetch request. You can use the module types extra and then set the shouldFetch hook to always return true in https://github.com/systemjs/systemjs/blob/master/docs/hooks.md#shouldfetchurl---boolean. Then hook the fetch call as well itself to add the extra headers you need.
Hi, I want to use SystemJS 6 to build a plugin system in Angular. Almost any example uses SystemJS 0.2x. Is it possible to achieve the same as describes in this SO question with SystemJS6? https://stackoverflow.com/questions/60284943/updating-systemjs-from-0-21-to-6-x-with-webpack => The thing I do not know to migrate is the SystemJS.newModule, as it does not exist in SystemJS 6 anymore. Any advice would be greatly appriciated!
If you look for System.set examples in the issue queue I'm sure you should find a similar answer
For example see systemjs/systemjs#2152
Thanks a lot, I managed to get it working! See https://stackoverflow.com/a/63917606/2528609 for details