Cytoscape.js integration Uncaught Error: Mismatched anonymous define()

, ,
1

For PKAN.dcatapde a semantic web enhancement for plone we like to include cytoscape.js for graph display.

We registered a plone resource

  <records
      prefix="plone.resources/cytoscape"
      interface="Products.CMFPlone.interfaces.IResourceRegistry">
    <value key="js">++resource++pkan.widgets/cytoscape.js</value>
  </records>

and we defined a mockup pattern

require([
  'jquery',
  'pat-base',
  'pat-logger',
  'pat-registry',
  'mockup-utils',
  'cytoscape',
  'underscore',
], function($, Base, logger, Registry, utils, cytoscape, _) {
  'use strict';
  var log = logger.getLogger('pat-graph');
  console.log('pat-graph')

  var ContentLoader = Base.extend({
    name: 'graph',
    trigger: '.pat-graph',
    parser: 'mockup',
    defaults: {
      url: null,

The cytoscape.js is delivered via the view

class Graph(BrowserView):
"""A View for a cytoscape graph"""

def __call__(self, *args, **kwargs):
    add_resource_on_request(self.request, 'pkanpatterngraph')
    add_resource_on_request(self.request, 'cytoscape')
    return super(Graph, self).__call__(*args, **kwargs)

The view runs, the JS is delivered as a resource but the JSconsole in the browser tells me:

default.js:172 Uncaught Error: Mismatched anonymous define() module: function () {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded

If I go brute and just hammer it as a script tag into a template

<script src="++resource++pkan.widgets/cytoscape.js">
(function($) {
     $(document).ready(function() {

          $.ajax({
              url: 'http://localhost:8080/Plone6/harvester-ordner/rdf-import/graph_data',
              method: 'GET',
              dataType: 'json',
              data: {},
              success: displaygraph,
              error: function() {alert('error getting data');}
          });
    });

    var displaygraph = function(data) {
        $('#cy').cytoscape({
            elements: data
        });
    }
})(jQuery);
</script>

The result is the same error. So I suppose that the error has nothing to do with my mockup pattern but is a incompatibility between the cytoscape JS and the plone requireJS machine.
Cytoscape states :

To use Cytoscape.js with AMD/Require.js:

require(['cytoscape'], function(cytoscape){
  // ...
});

which I did.

This is not the first time I tried to include a 3rd party JS lib into plone 5.
I included datatables.py for instance. But not without pain. I had to remove some JS wrappers/headers by hand to make it work with plone.

This case is much more problematic. The JS lib is made with webpack and the webpack traces in the JS are not so easy to be undone.

Any help appreciated

Volker

2

Probaly just in you 'pasting', but you forgot < script> before (function).

it is possible to require 'with the path', like:

Which is defined here:

(but without adding it to any bundle)

(not sure if that is 'good practice, though'