Get Free Trial
Get Free Trial

Flexmonster deployment via gulp build

Yousif Ahmed asked on March 22, 2019

Hello,
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
 
Kind Regards,
 
Yousif

11 answers

Public
Yousif Ahmed March 22, 2019

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?
 
Kind Regards,
 
Yousif

Public
Tanya Gryshko Flexmonster March 22, 2019

Hello, Yousif,

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.

Regards,
Tanya

Public
Yousif Ahmed March 26, 2019

Thanks Tanya.
 
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

Public
Tanya Gryshko Flexmonster March 26, 2019

Hello, Yousif,

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.

Regards,
Tanya

Public
Ian Sadovy Flexmonster April 9, 2019

Hello Yousif,
 
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.
 
Regards,
Ian

Public
Yousif Ahmed April 10, 2019

Hi Ian, 
 
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!
 
Kind Regards,
 
Yousif

Public
Ian Sadovy Flexmonster April 11, 2019

Hello Yousif,
 
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 scripts/flexmonster folder.
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.
 
Regards,
Ian 

Attachments:
PivotTestApp.zip

Public
Yousif Ahmed April 17, 2019

Hi Ian,
 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’:

  • html2canvas calls define anonymously, and this is what causes the requireJS error, as the optimizer must have named modules only
  • html2canvas is also bundled with jsPDF.min, so the module gets loaded twice, once by flexmonster and once by jsPDF.min. So even if html2canvas.min is edited the anonymous define() call still occurs from within jsPDF.min
  • Flexmonster ships with an old version of jsPDF that also includes html2canvas as an internal bundled dependency (this has been addressed in later releases of jsPDF – see https://github.com/MrRio/jsPDF/releases/tag/v1.5.0)

I have only managed to work around the issue by taking the following steps:

  1. Using the unbundled flexmonster.js file instead of flexmonster.full
  2. Manually loading html2canvas into the global scope before loading flexmonster – this stops html2canvas from making the anonymous define() call
  3. Installing the latest version of jsPDF from npm (which no longer includes html2canvas ) and loading this into the global scope before loading flexmonster

This solution works, but is far from ideal for a number of reasons:

  1. I am using jsPDF v1.5.0, which seems to work fine with flexmonster 2.7.3, but this may not be the case for future versions of flexmonster
  2. When using flexmonster instead of flexmonster.full, flexmonster still tries to load these libraries from componentFolder/lib/ even when they are present in the global scope, and if the files are not there the feature
    doesn’t work. This means we will have to deploy a componentFolder/lib/ in production that contains duplicate copies of these components in order for these features to work. It would be great if flexmonster
    could check if these dependencies were already loaded before going to the lib/ folder?
  3. I am not sure which other bundled dependencies exhibit the same problem – after implementing a workaround for jsPDF and html2canvas the export features seem to work properly but I have not done any extensive testing with the other bundled dependencies

 
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.
Kind Regards,
 
Yousif

Public
Ian Sadovy Flexmonster April 18, 2019

Hello Yousif,
 
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 flexmonster.
Please take a look at the attached project.
Hope it works well for you.
 
Regards,
Ian

Attachments:
PivotTestApp-2.zip

Public
Yousif Ahmed April 25, 2019

Hi Ian,
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.
 
Kind Regards,
 
Yousif

Public
Ian Sadovy Flexmonster April 26, 2019

Hello Yousif,
 
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.
 
Regards,
Ian
 

Please login or Register to Submit Answer