How to integrate JqTree in Rails 6 with webpacker, tree is not a function

Question

I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application

UPDATE:- Using yarn add jqtree seems to have magically cleared up most of my issues however I am currently facing tree is not a function error

I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6 Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of

So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

I can confirm with a simple alert that this is all hooked up and working

I have made some more progress Instead of downloading the jqTree files, I have used yarn to install jqTree

replacing

I have downloaded the jqTree files and unpacked them to folder called jqTree inside my javascript/packs folder

with

yarn add jqtree

and now I have sorted out the require which is as it should be without the ; So

require ;'jqTree/tree.jquery.js'

becomes

require('jqtree')

also in my javascript/packs folder I have created a sortable.js file which did contain the following

require ;'jqTree/tree.jquery.js'

jQuery(window).on('load', function () {
  alert("Done"); //This works!
});

$(function() {
  $('#tree1').tree({
      data: data,
      autoOpen: true,
      dragAndDrop: true
  });
})

the ; in the require statement confuses me a lot but the console error was demanding it

This now looks like this

require("jqtree");
$(function() {
  alert($('#tree1').data('items'));
});

$('#tree1').tree({
    data: $('#tree1').data('items'),
    autoOpen: true,
    dragAndDrop: true
});

With the above code I get an reference error: data is not defined In a view I have the following code

<%=javascript_pack_tag("sortable")%>

<%= content_tag "div", id: "tree1", data: {items: @menu_items} do %>
  Loading items...
<% end %>

The issue I have now is that my browser is reporting an error that tree is not a function.

In my application.css.scss I have

 *= require "jqtree.css"

Which doesn't work

Answer 1

I have a detailed answer for this that has taken me quite sometime to put together, I will update this answer with that detail over the coming days but it starts with getting everything hooked up properly with jQuery, jQuery-ui and the componment itself which in this case is jqTree

Yarn is definitely the answer Starting with the command line to add the relevant packages

yarn add jquery
yarn add jquery-ui
yarn add jqtree

Once the relevant yarn packages are installed I needed to make jQuery and jQuery-ui available for reasons that I am yet to fully comprehend, a simple require is not enough

Following this post https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

I setup my environment.js file in the config/webpacker folder to look like this

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);
const aliasConfig = {
    'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

After restarting my server I created a simple js file called test.js in the app/javascript/packs folder which as far as I can tell is where all javascript now resides although there is still the possibility of using sprockets by putting javascript in the assets/javascript folder, I have been advised, with no explanation as to why, that it is not a good idea to mix webpacker with sprockets for serving javascript. Webpacker does has the ability to serve stylesheets as well, however I still prefer my stylesheets to be served by sprockets in the app/assets folder and using stylesheet link tags as traditionally done in Rails apps as testing proved to be more efficient this way so mixing sprockets with webpacker in this way doesn't seem to be an issue.

I just chucked a simple alert message into the test.js file just to check that webpacker and jQuery was all hooked up properly.

So test.js looks like this

require("jquery-ui");
require("jqtree");

$(function() {
  alert($('#tree1').data('items'));
});

Then to use the javascript I just included a javascript pack tag in the view I wanted to use it in like so.

in a random edit.html.erb view

<h1>Editing Menu Item</h1>

<%= render 'form', menu_item: @menu_item %>

<%= link_to 'Show', [:admin, @menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>

<%=javascript_pack_tag("test")%>

No need for paths or extensions to the file name, it just works!

I find this approach to be really neat for two reasons

1) I am not unnecessarily bloating out web pages by including page specific javascript in every single page by including it in the application.js file which gets included by default in the layout and therefore in every page.

2) I don't seem to have to worry about DOM loaded events and so far no issues with turbolinks interfering with it, although I suspect that may be more by luck than judgement and I may have to revise that thought in the future and make use of 'data-turbolinks-track': 'reload' option, but so far so good and this has not been necessary.

So now that all is hooked up and working it was time to make the jqTree component work with ancestry gem to be able to structure and organise the menu items for the site,

But up to this point it has been a simple matter of using yarn top install components and hooking up jQuery properly. I didn't use yarn initially and that led me to all sorts of problems resulting in my original question.

The rest is to follow...