In electron: jquery.fancytree-all-deps.min.js fails to load with require()

[allavoie]

Hi, using the nodejs electron app framework, I experience the same problem.
I was first using fancytree-all-deps within a linux dev environment,
and it worked, by doing require() on (in that order)
jquery,
jquery-ui
and then jquery.fancytree.

I now moved my dev environment on a Mac, but I cannot load jquery.fancytree-all-deps (or jquery.fancytree-all) anymore.
When doing a require('...jquery.fancytree-all'), the package is found, but an exception:

Uncaught Error: Cannot find module 'jquery.fancytree.ui-deps'

is thown.

How to get around this exception ?
Is there a description somewhere of what should be the abstract all sequence of action to respect.
How should I proceed to propose a solution, can you provide hints, I can troubleshoot the problem, and try to propose a solution. For now, I try to add some changes to the jquery.fancytree-all-deps.js file but its to attempt to load itself. I could extract the minimal use case if needed.

Thx in advance.

[allavoie]

I will come back with small demo of this issue.

[mar10]

Yes, a demo would help.
Btw. if you are using require or import, did you try to load the modules directly, like

const fancytree = require('jquery.fancytree');
require('jquery.fancytree/dist/modules/jquery.fancytree.edit');
require('jquery.fancytree/dist/modules/jquery.fancytree.filter');

[allavoie]

Hi, I added that issue as a standalone ticket, as I figured it might be a different issue than the other require() reported problems. I will produce a demo of this shortly. I need to re-make it work on Linux and show the problem on Mac. Thx for your quick answer, it is well appreciated.

[allavoie]

Update:
https://github.com/allavoie/fancytree_issue/blob/master/README.md

In summary: works on Linux&Mac but with a twist: I rewrite the node_modules/jquery.fancytree content with your development github project.
I will work to generate the error again, but I was originally trying to use the normal npm install jquery.fancytree but with no success, I will come back with more details.

[allavoie]

I finally got more information. It seems to be an incompatibility between v2.24.0 and v2.26.0. In my use case,

• v2.24.0 works
• v2.26.0 does not work,

To reproduce the problem, you can use the same repo (https://github.com/allavoie/fancytree_issue), but switch to branch "make_fancytree_work_with_npm_install", and looking at the README file of that same branch, you will find the procedure to reproduce the issue. As an extract, here is the common code between these branches:

const $ = require("jquery");
window.jQuery = $;
window.$ = $;
const jquery_ui = require('./bower_components/jquery-ui/jquery-ui');
const explorerLoader = require("jquery.fancytree/dist/jquery.fancytree-all-deps.min");

The following generates an exception (module not found) on v2.26.0, even thought the file exist in the node_modules package.

To view the problem, you can switch the versions in the package.json and view the problem by running: npm update && npm run webapp.

Is there something else you wish me to attempt ?

[mar10]

With 2.26 you should not need to explicitly include jQuery UI anymore. Also jquery.fancytree-all-deps.min is not needed (which also already contains the needed jQuery UI components)

Instead use the single modules directly from the dist/modules folder, e.g.

const fancytree = require('jquery.fancytree');
require('jquery.fancytree/dist/modules/jquery.fancytree.edit');
require('jquery.fancytree/dist/modules/jquery.fancytree.filter');

(The core module jquery.fancytree/dist/modules/jquery.fancytree is defined as main, so we can include it like require('jquery.fancytree');)

See also https://github.com/mar10/fancytree/wiki#use-a-module-loader

That's the idea anyway. I am curious to hear if it works for you.

[allavoie]

Hi,

I tried your suggestions, and read your documentation.
Here is the end result:
Exception and Context

Any other hints ?
I could try to inspect the code about the module loading, is this only located in the jquery.fancytree head of the javascript module or should I inspect other code sections ?

[mar10]

Thanks a lot for preparing this excellent reproduction support!

There was still a bug in Fancytree 2.26 concerning the UMD requirements (Node/CommonJS mode).
The core module 'jquery.fancytree' depends on the support module 'jquery.fancytree.ui-deps', which could not be resolved. This fix will be released with 2.27 (maybe you can apply this patch manually until it's available):

[allavoie]

@mar10: Having some problems with my environments on my repo... Cannot reproduce my scenarios... Will solve this and test your solution soon

[allavoie]

@mar10: Ok, could reproduce the problem, I cleared my npm cache, re-git-clone my repo (in master),

• reproduced a working use case (package.json: jquery.fancytree: v2.24.0),
• changed to ^v2.26.0, npm update...
• add your change in jquery.fancytree/dist/modules/jquery.fancytree.js...
• but witness again jquery-fancytree-ui-deps cannot find module exception.
• I noticed it tried to load a ...-deps-min.js... so changed the jquery.fancytree/dist/jquery.fancytree-all-deps.min.js and the restart trigger another cannot find exception on: jquery.fancytree.table.

So I figured you must have a build process to generate this .min.js and applying your fix might not be enough for my use case.

I will stick on v2.24.0 for now and wait for your next release, checking if my use case is covered.
Thx.

[mar10]

Hi @allavoie if you want to update and it still doesn't run please let me know. I could set up a demo based on your sample and try to get it to work.

[PeterAJansen]

I would be interested in seeing >2.24.0 work with Electron (particularly for the fontawesome skins)

[mar10]

@PeterAJansen I am interested in that too. Do you have a non-working sample that you could share?

[mar10]

Starting with the electron sample, I added this changes, that seem to work.

package.json:
(by invoking npm install jquery.fancytree --save)

  "dependencies": {
    "jquery.fancytree": "^2.30.0"
  }

renderer.js:

const fancytree = require('jquery.fancytree')
require('jquery.fancytree/dist/modules/jquery.fancytree.filter')

const tree = fancytree.createTree('#tree', {
  extensions: ['filter'],
  source: [
      {title: 'node1'},
      {title: 'node2', folder: true, children: [
          {title: 'sub1'},
      ]},
    ],
  
});
tree.expandAll()
tree.applyFilter("1")

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link href="./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello World!</h1>

    <div id='tree'></div>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>