I'm seeing the error below in console only when loading in iframe when loading compiled ES6 Javascript classes using SystemJS v 0.19.41.
system.src.js:3054 Uncaught Error: Module https://d1jbmqjs327xbn.cloudfront.net/_ra/spaces-developer.pxand/assets/js/framework/builder/builder-client.js interpreted as amd module format, but called System.register.
at a. (system.src.js:3054)
at a. (system.src.js:3773)
at a.reduceRegister_ (system.src.js:4268)
at HTMLScriptElement.m (system.src.js:2851)
This seems to be the same issue as the one that was closed a couple years ago, but for this case it only happens in an iframe.
https://github.com/systemjs/systemjs/issues/970
It happens consistently in Safari, but sporadically in Chrome. The issue only started last week with no code change so I'm at a lost on what could have gone wrong. When this error occurs, it simply stop execute the Javascript which is very problematic.
Anyone has any idea on what could be the root cause of this issue?
Just in case this helps anyone. I found that the issue was with jQuery UI as it's using AMD by default. I had to revert back to an older version to fix this issue. The only explanation I have for the sporadic behavior in Chrome is that Chrome doesn't consistently execute scripts at the same rate unlike Safari. However, this still doesn't explain why I started seeing the issue all the sudden without any change.
So if this ever happens to you, look for a library that loads dependencies using AMD by default and either load them using import instead or if you don't have a choice, try rearrange the order of import and move the one that's causing the issue up. For my case, that's not possible and that's why I had to use an older version of jQuery UI.
As for why it only happens when it's in an iframe. Well, it remains a mystery. I can only think that it's because how content in iframe is loaded by browser. I would love to hear an opinion from an expert on this.