Unable to import a node_module into my controller

1

I am newbie to Stimlus, and planning to attach the treeview to one of my DOM element, and nothing happens.

view code
" class=“treeview” data-controller=“rule” id=“tree” data-target=“rule.tree”>"

controller code

import {treeview} from “bootstrap-treeview”
import { Controller } from “stimulus”
export default class extends Controller {
static targets = [ “tree” ]
connect() {
this.treeview = TreeView({
data: {
text: “Node 1”
}
});
}
}

I am using treeview module listed here
https://github.com/jonmiles/bootstrap-treeview.

I have installed the package using npm inro by node_modules.

Thanks in advance.
Rao

2

Looking at the docs for that module, it uses jQuery. So you’d have to do something like this:

$(this.treeTarget).treeview( …options go here )

Plus make sure jQuery itself is also loaded.

3

Thanks for your reply Jared,

I have loaded jQuery in environment.js as

const { environment } = require(’@rails/webpacker’)
const webpack = require(‘webpack’)

environment.plugins.prepend(
‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’,
jquery: ‘jquery’,
‘window.jQuery’: ‘jquery’,
Popper: [‘popper.js’, ‘default’]
})
)
module.exports = environment

Here is the error message.
Module not found: Error: Can’t resolve ‘bootstrap-treeview’ in ‘C:\New Intake\app\javascript\controllers’

I am not sure what else I am missing.
import {treeview} from “bootstrap-treeview”
import { Controller } from “stimulus”

export default class extends Controller {
static targets = [ “tree” ]

connect() {
$(this.treeTarget).treeview({

                data: {
                          text: "Node 1"
                        }

            });

        }

}

4

I am seeing this error in the console.

image

Please advise.