Using .js Files from node_modules directory

Flow
1

Hi,

I was able to download jquery via npm into the “node_modules” directory. But i receive this error message “ReferenceError: $ is not defined”.

@Route
@NpmPackage(value="jquery", version = "3.4.1")
@JsModule("jquery/dist/jquery.js")

public class MainView extends VerticalLayout {

    public MainView(@Autowired MessageBean bean) {
        Button button = new Button("Click me", e -> Notification.show(bean.getMessage()));
        button.setId("test");
        add(button);

        UI.getCurrent().getPage().executeJs("$('#test').hide()");
    }
}

If I use jquery via

@JavaScript("https://code.jquery.com/jquery-3.4.1.min.js")

everything is working fine, but I need to load js files locally.

Should I use @JavaScript or @JsModule.

Thanks Dennis

2

Does it work better if you use @JavaScript("jquery/dist/jquery.js") ?

3

Artur Signell:
Does it work better if you use @JavaScript("jquery/dist/jquery.js") ?

No, same result. I’m also not able to load js files, if I put the file into the frontend directory.

The only way is to load the files online. I also tried other js files, like tooltip.js

I’m using v14 with Spring

4

The issues you are seeing might be https://github.com/webpack/webpack/issues/4258. As jQuery is included in the webpack bundle, it will not make $ available on window by default. One solution according to the issue is to add

plugins: [
new webpack.ProvidePlugin({
            $: "jquery",  
            jQuery: "jquery" 
        })
],

to webpack.config.js

5

Maybe that will help for jquery, but I have the problem with all my tested js files. For e.g. “tooltip.js”, I receive the error message: “ReferenceError: Tooltip is not defined”

@Route
@NpmPackage(value="tooltip-js", version = "3.0.0")
@JavaScript("tooltip-js/dist/tooltip-min.js")

public class MainView extends VerticalLayout {

    public MainView(@Autowired MessageBean bean) {
        Div div = new Div();
        div.setClassName("my-tooltip");
        div.setText("tooltip");
        add(div);

        UI.getCurrent().getPage().executeJs("new Tooltip({ el: document.body.querySelector('.my-tooltip')});");
    }
}

If I check my Browser, tooltip.min.js, will be available, but I can’t use it.

17935204.jpg

6

Hi,

You can use this:

@Route
@NpmPackage(value="tooltip-js", version = "3.0.0")
@JavaScript("tooltip-loader.js")
public class MainView extends VerticalLayout {

and this tooltip-loader.js:

window.Tooltip = require("tooltip-js/dist/tooltip-min.js");

This will load the Tooltip and make it available in the window.

7

Hi,

now I receive no Error Message, because Tooltip is known, but I also can’t see any tooltips. You can see tooltips in your sample?

Thanks

8

To test it, I had to change the java code.

I tried with the sample here: https://www.npmjs.com/package/tooltip-js

(add a button and a div and css file) and call manually the tooltip.show() in the browser.
The render was not great (and not really a tooltip) but it worked and I think the library is working this way.

9

I need to get it run without a button. The Tooltip should appear after loading the page.

So the “tooltip-loader.js” solution is not working. If I check the Browser Console, I can’t see that “tooltip-min.js” was proper loaded.

@NpmPackage(value="tooltip-js", version = "3.0.0")
@JavaScript("./src/tooltip-loader.js")

public class MainView extends VerticalLayout {

    public MainView(@Autowired MessageBean bean) {
        Div div = new Div();
        div.setClassName("my-tooltip");
        div.setText("tooltip");
        add(div);

        UI.getCurrent().getPage().executeJs("var tooltip = new Tooltip({ "+
                "el: document.body.querySelector('.my-tooltip'), "+
                "title: 'test' "+
                "});"+
                
                "tooltip.show();");
    }
}

tooltip-loader.js

	window.Tooltip = require("tooltip-js/dist/tooltip-min.js");
10

Hi,

I tried to reproduce the example of the tooltip js ( https://github.com/mkay581/tooltip-js/blob/master/examples/basic-tooltip.html )

@NpmPackage(value="tooltip-js", version = "3.0.0")
@JavaScript("./tooltip-loader.js")
@CssImport("./demo.css")
public class MainView extends VerticalLayout {

    public MainView() {
        Div div = new Div();
        div.setClassName("my-tooltip");
        div.setText("Tooltip");
        add(div);

        Button button = new Button("Toggle");
        button.addClassName("my-tooltip-toggle-btn");
        add(button);

        UI.getCurrent().getPage().executeJs(" var tooltip = new Tooltip({\n" +
                        "            el: document.body.querySelector('.my-tooltip'),\n" +
                        "            activeClass: 'my-tooltip-active',\n" +
                        "            triggerClass: 'my-tooltip-toggle-btn',\n" +
                        "            showEvent: 'mouseenter',\n" +
                        "            hideEvent: 'mouseleave',\n" +
                        "        });")
        ;
    }
}

and here the css file.

.my-tooltip {
    display: none;
    background-color: lightblue;
    position: absolute;
    top: -20px;
    left: 0;
    color: blue;
    text-align: center;
}
.my-tooltip-active {
    display: block;
}

The tooltip js is correctly imported and it’s working.

11

You are right, the css part was missing.
Thank you!

Now, I’m not able to use “protip” the same way.
In my opinion, in Vaadin 8 it was easier to import js files.