Support for Google Maps API under newer version of SystemJS

• SystemJS Version: 6.8.3
• Which library are you using?
  • system.js
  • s.js
  • system-node.cjs
• Which extras are you using?
  • AMD extra
  • Named Exports
  • Named Register
  • Transform
  • Use Default
  • Global
  • Dynamic Import Maps
• Are you using any custom hooks? No.

Question

I’m working on converting a website from using RequireJS to SystemJS. The site includes TypeScript and React code but a major part of the site’s function is to display maps using the Google Maps JavaScript API. Type TypeScript part was easy, only requiring a change to the tsconfig.json file to switch from “amd” to “system” for the module type. I would have been happy to stick with AMD modules but it looks like the “AMD Extra” doesn’t support direct loading of AMD modules. I haven’t checked on React yet, but I’m not expecting any issues there as it is just another module.

The Google Maps API integration is where I’m running into issues. I know this was discussed quite a bit in #424, but the techniques used to load the API scripts don’t appear to be supported anymore. Has anyone come up with a working way of loading scripts such as this, especially with the async loading that Google forced on us?

Here is where I am so far. My importmap.json (don’t like having it directly in my markup file) reads like this:

{
	"imports": {
		"page": "/js/page.js", 
		"mapping": "/js/mapping.js", 
		"jquery": "/lib/jquery/jquery.js",
		"bootstrap": "/lib/twitter-bootstrap/js/bootstrap.bundle.js",
		"google.maps": "https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]"
	}
}

The “page” module depends on “jquery” and “bootstrap”. That part is working fine. However, when I try to import “mapping”, which depends on “google.maps”, I end up with this error:

Access to script at 'https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]' from origin 'https://localhost:44374' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I’m sure there are going to be other issues (such as the asynchronous loading), but this is the first one I’ve run into.

Now, on to figuring how the SystemJS equivalent to RequireJS shim config. Unfortunately, quite a few packages out there don’t define their dependencies very well.

[StuffOfInterest]

I ended up going with a hook into the createScript function. In case anyone else wants to use it, here is what I came up with:

(function() {
    var originalCreateScript = System.constructor.prototype.createScript;
    System.constructor.prototype.createScript = function(url) {
        if (url.indexOf("googleapis.com") > -1) {
            var script = document.createElement('script');
            script.async = true;
            script.src = url;
            return script;
        }

        return originalCreateScript(url);
    }
})();

[joeldenning]

I did some more digging. As I suspected, this does have something to do with the crossorigin attribute. It turns out that Google API does not want that attribute on the script tag. Currently, system.js is adding the attribute on

See my previous comment where I suggested hooking createScript with your own implementation. We have already made it possible to modify the crossorigin and integrity attributes. See https://github.com/systemjs/systemjs/blob/main/docs/hooks.md#createscripturl---htmlscriptelement

More questions coming soon. It appears a lot of features changed in SystemJS recently and a number of things that were supported using System.config() don’t appear to be supported now. I’ll write them up as separate questions over the next few days so that future Google searches may find the (hopefully) more relevant answers. Thanks again.

System.config() was removed in SystemJS 2