Our web app is built using gulp to combine and minify all our code into a single ‘scripts.js’ file, and all our libraries and plugins are installed via npm and included as AMD modules. Flexmonster seems to require a path to its component folder when instantiated for certain features to work. In development I am just setting this to “../node_modules/flexmonster”, but what is the recommended way of including flexmonster in your built app? Is there a built production version of flexmonster which incorporates all of these components? Or, alternatively, is there a way of integrating these components into our gulp build? We would like to avoid having to include the entire flexmonster component folder in our build output if possible
Update: I have realised that there is a flexmonster.full.js file, which I assume is the full bundled version, but I don’t seem to be able to import flexmonster through requireJS from this file – whenever the module is imported requirejs throws an error – “Mismatched anonymous define() module” for html2canvas and jspdf libraries. It would be great to be able to use this full bundled version, do you have some advice on how we can use this with requirejs?
Thank you for writing to us.
Yes, you are right,
flexmonster.full.js is the full bundled version. However, our development team needs some time to investigate the best way to import Flexmonster through requireJS. We will contact you as soon as we have any updates.
Just to add, I think there is a related issue with regards to the way flexmonster loads its dependencies, even when not using flexmonster.full – We already use d3 v4 in our app for other visualisations and also have other third-party libraries which depend on d3 v4, but when you switch to charts flexmonster loads its own version of d3 (v3), which causes the same requireJS error. This error is fatal for us, since our app is very modular and requireJS then fails to load any more modules
Thank you for specifying the additional details.
We will update you about the results on April the 23rd.
Please let us know in case of any other questions.
Thank for giving us some time to investigate the issue.
We have prepared a sample with RequireJS: https://github.com/flexmonster/pivot-requirejs
Also, we have a sample with Webpack: https://github.com/flexmonster/pivot-webpack
Both seem to be working as expected.
As we understood, the issue described above lies somewhere between RequireJS and Webpack.
Could you please share a quick sample project how you use RequireJS/Webpack and Flexmonster (e.g. based on our samples)?
It will help us a lot to move further with this issue.
As for the D3, we have a modified version that defines
d3v3 instead of default
d3, so it’s strange that you are having issues with it.
Look forward to hearing from you.
Thanks for getting back to me and for providing the above samples. Unfortunately, using the latest version of flexmonster (2.7.3), I am now no longer able to instantiate a flexmonster instance at all – a TypeError is thrown “Flexmonster is not a constructor”.
This is a different mechanism to v2.6.14, when the pivot was instantiated through jquery. I can see that some changes have been made to the typescript definitions in @types, but I cannot get this to work correctly with requireJS. We are not using Webpack in our project – I think in our case the issue is not RequireJS/Webpack, but rather integration with RequireJS/Typescript.
I have created a sample project based on yours to illustrate the problem we are seeing. It also demostrates how we are using typescript and requireJS to load modules in our project: https://github.com/BV-YAhmed/PivotTestApp
With regards to d3, html2canvs and jspdf, I cannot confirm if these are now loading correctly since we can’t get past this initial TypeError.
Any help/advice you can offer would be greatly appreciated – at present, we cannot use v2.7.3 at all!
Thank you for the sample project.
We have found the issue with the AMD module definition for Flexmonster.
Please find the working sample attached. It contains updated
flexmonster.full.js in the
Also, we will update
flexmonster NPM module on Apr 22, so you will be able to switch back to node modules instead of the custom build after that.
Please let us know if it works well for you.
thanks for providing the working sample, and apologies for the delay in getting back to you. I have spent a lot of time investigating this issue and would like to share my findings with you:
The sample you provided does in fact fix the AMD module definition, and we are able to compile and isntantiate flexmonster in Typescript with RequireJS. However, the bundled flexmonster.full is still incompatible with requireJS as its dependencies are not loaded properly through requireJS. This is evident in the working sample app – if you try to export to image or pdf, you will see an error in the console – ‘html2canvas/jsPDF is not defined’.
I have spent some time investigating what is happening and I believe it is primarily down to the bundled dependencies ‘html2canvas’ and ‘jsPDF’:
I have only managed to work around the issue by taking the following steps:
This solution works, but is far from ideal for a number of reasons:
It appears as though some of these issues are down to 3rd party libraries which are obviously beyond your control, but I think that if Flexmonster updated its dependencies and checked if they were already loaded before using them, this would probably go some way towards fixing the problem. When I get a chance I will make my workaround available to give you a better understanding of what is going on, but i have not had the chance to do this yet.
Thank you for such a detailed investigation.
We have reviewed all Flexmonster dependencies and modified their module declarations to work smoothly with Flexmonster/RequireJS and other integrations.
Now, seems it should work properly and requires only to import
Please take a look at the attached project.
Hope it works well for you.
Thank you for the revised version – I can confirm that this has resolved the issue for us, which is great. We are now able to use the bundled flexmonster.full successfully with Typescript and RequireJS, and both the exports and charts features are working properly.
There is still an issue with the file when we run the requireJS optimizer (r.js) during our production build – this is what combines and uglifies all of our scripts/modules into one file. The optimizer throws an error when trying to parse the flexmonster.full file – “Cannot read property ‘type’ of undefined”. However this is not a big problem, we’re able to work around this by just excluding flexmonster from this optimisation.
Again, thanks for your help with this as we would not have been able to use the control without the improvements you have made.
Thank you for the feedback.
We are glad to hear that everything finally works well.
Your investigation helped us a lot to complete the fix.
As for the optimizer, excluding
flexmonster.full.js is a recommended option, because the code and all libraries inside are already minified.
Please let us know if you have any other questions.