When you start coding right after reading the developer guide you would most likely try to load external libraries by placing them in your SDK folder structure and referencing them in your contribution.xml. So far so good, but when you open your favorite browser’s developer tools you might notice an error message coming from DesignStudio’s built-in requirejs plugin: MISMATCHED ANONYMOUS DEFINE() MODULES (This problem doesn’t apply to all of the libraries but it would be too extensive to explain all of the possibilities right now). Until recently this was no real problem, because the errow was only showing in devel mode, if you made sure that all of you external libraries are loaded in the correct order. But IE started to expose this requirejs error as a standard DesignStudio error. That’s when I thought it is time to address this issue after all.
The following code examples are inspired by Mike Howles and Karol Kalisz, with whom I collaborate on the SCN DesignStudio SDK repository. I chose Leaflet and OpenStreetMap to show the integration.
First thing you have to do, is erase all of the libraries from the contribution.xml file which you want to load using requirejs. After that wrap your code in component.js like this:
At last you only have to ensure that all of the function closures opened at the top are closed again (lines 53-54). Now the tedious mismatched anonymous define error should be gone for good 🙂
Have fun using requirejs and as always feel free to ask lots of follow up questions.
Find the fully functional example project and the source files on GitHub: https://github.com/MartinPankraz/DesignStudioSDK-Components