Hi,
When we navigate away from a page that has a Sankey Diagram block on it, we get an error:
Mismatched anonymous define() module: function(exports, d3Array, d3Collection, d3Shape) {
'use strict';
function targetDepth(d) {
....
<tons of javascript that I've trimmed. It appears to be the contents of the d3_sankey script>
Object.defineProperty(exports, '__esModule', { value: true });
}
http://requirejs.org/docs/errors.html#mismatch
at makeError (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystems.js?5nDbdRKHkFGAjYmzYfZYrQ:1:1016)
at y (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystems.js?5nDbdRKHkFGAjYmzYfZYrQ:1:4633)
at Object.o [as require] (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystems.js?5nDbdRKHkFGAjYmzYfZYrQ:1:11095)
at requirejs (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystems.js?5nDbdRKHkFGAjYmzYfZYrQ:1:14728)
at Object.c [as onEnter] (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:9:13586)
at Array.<anonymous> (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:8:28455)
at https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:8:28958
at https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:8:28851
at i (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:8:4224)
at Object.n [as loopAsync] (https://<our tenant>.outsystemscloud.com/SankeyDiagramSample/scripts/OutSystemsReactView.js?i6se5IhdNMnGAKCelYhsFQ:8:4337)
1. Remove redundant scripts from required:
2. Change the initialization JS node to use a particular version 45.1 instead of 'current'.
In the end, the Web block should look like this:
The issue is caused by the overlapping exports of the same modules from loaded scripts: Google Charts that is used to render the Sankey diagram already fetches the required D3 implementation, while the script from Required is overlapping the exports. And the latest version of D3 from Google Charts that works with React is 45.1 (as far as I could understand it).
Worked like a charm!
New version uploaded in order to fix that behaviour!
Thank you for the investigation and for sharing!
Hi Greg,
Thank you for letting me know about this issue. I ever noticed it, this was just a sample plugin, I never used in any project and sample has only one page.
I was able to replicate the issue, I will have a look and try to understand what is causing this issue.
Hope giving you more feedback about this issue soon.
This issue seems to affect many modules that try to integrate JavaScript libraries into OutSystems. I'm yet to find a solution to this.