root-project
Missing dependency `fflate` during webpack build
After upgrading jsroot to 7.6.0, the build of our web interface (https://github.com/reanahub/reana-ui) fails due to some missing dependencies. We are using CRACO and the build is performed by webpack.
This is the output of yarn craco build:
yarn run v1.22.19
$ [...]/reana-ui/reana-ui/node_modules/.bin/craco build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'fflate' in '[...]/reana-ui/reana-ui/node_modules/jsroot/scripts'
error Command failed with exit code 1.
Everything works well with jsroot 7.5.4.
Does webpack and/or CRACO need to be configured in a particular way to work with the latest jsroot version? Thanks for your help!
Strange.
fflate required because of indirect dependence for jsPDF module.
I include it in direct dependencies for the project.
Can you test branch 7.6 now?
Thanks for the quick reply!
I have tested the 7.6 branch now, and webpack reports that there are more missing dependencies.
To find all the missing dependencies, I have built my package multiple times until it was built without errors, each time adding the reported missing dependency with yarn add ....
The are all the dependencies:
- fflate
- canvg
- html2canvas
- jspdf
But I guess you want to avoid having jspdf in your dependencies? Note that the need for jspdf comes from svg2pdf.
For completeness, these are all the errors that were reported in the failing builds:
Module not found: Error: Can't resolve 'canvg' in '[...]/reana-ui/reana-ui/node_modules/jsroot/scripts'
Module not found: Error: Can't resolve 'html2canvas' in '[...]/reana-ui/reana-ui/node_modules/jsroot/scripts'
Module not found: Error: Can't resolve 'jspdf' in '[...]/reana-ui/reana-ui/node_modules/svg2pdf.js/dist'
Yes, I can reproduce problem with your project but have no idea how to solve it.
As I understand, you are building code for web browser where JSROOT uses its own version of svg2pdf:
https://github.com/root-project/jsroot/blob/master/scripts/svg2pdf.umd.min.js
You should somehow convince webpack ignore some of the projects which are automatically installed by jsroot and used only with node.js.
For instance, when I create JSROOT builds, I have some custom rules for rollup:
https://github.com/root-project/jsroot/blob/master/build/rollup.config.js#L9
Probably same can be done for webpack
I manage to integrate svg2pdf.js script into JSROOT and exclude it from dependence lists.
Now I can build your reana-ui without getting such error.
You can try master or 7.6 branch yourself.
If it would help - I can provide 7.6.1 release with these changes
Yes, I confirm that the build works now! (testing with branch 7.6) Thanks a lot!
However, I think there are still some packaging issues. In particular, the Save as -> canvas.pdf does not work properly:
In the network requests I see that there are some requests to jspdf and svg2pdf:
- https://localhost:30443/details/scripts/jspdf.umd.min.js
- https://localhost:30443/details/scripts/svg2pdf.umd.min.js
(note that the URL up to .../details/ is a REANA URL, while the following scripts/... is appended by jsroot/webpack)
However those files should be part of the webpack build bundle, and they should not be fetched separately. Not sure whether this is something we have to configure on our side?
In any case there is no hurry for this, the next release of REANA that is going to be published very soon is going to include jsroot 7.5. We will switch to 7.6 later on!
However those files should be part of the webpack build bundle, and they should not be fetched separately. Not sure whether this is something we have to configure on our side?
Yes, these files are not JS modules and can not be automatically fetched by build tools like webpack or any others. One need to copy them separately. Not sure if I can help from JSROOT side.
I closing issue.
In my mind one need special packaging rules which I cannot provide in JSROOT. But if you have idea how this can be placed into JSROOT - please reopen it again