JRS 8.0 "visualize not defined" error

Problem:

After installing the 8.0 release of JRS, my embedded reports stopped working.  The web page could not find the “visualize” function. I encountered a "visualize not defined" error. This article reviews why this occurs, and several work arounds.

Cause:

The problem appears when the visualize.js script follows require.js. If you put the script statement identifying visualize.js before the require.js script statement, it works.  If the order is switched, it no longer finds the visualize function.

<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>" <script src="js/require.js"></script>

The issue is around how visualize.js is loaded.  In version 8.0 a umd header was added into visualize.js script which means that if require.js is loaded before it the visualize.js will load itself into require and not into the window object

Here are 5 possible workarounds (try to use any one of them):

1. Load visualize.js script first.
2. In jrs-ui-pro/webpack.config.visualize.js replace libraryTarget: 'umd' to libraryTarget: 'window' and rebuild the visualize.js script.
3. Work with visualize.js as so require(['visualize'], function (visualize) {/* use viz here*/})
4. Temporary replace require with undefined before loading visualize.js require = undefined
5. Use the following approach:

<script src="js/require.js">

<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js">

<script>

require(['visualize'], function (visualize) { window.visualize = visualize })

</script>

Although require.js is the jasvavsript library mentioned in this article, it is just one of many implementations of AMD module pattern. It should be the same issue for any AMD loading system used by applications, not just require.js.