Uncaught SyntaxError when trying to add JavaScript to View

Hello there!

I am currently trying to learn Vaadin and want to create a view that includes a JavaScript file using the latest Vaadin version 16.0.2 in my Java app.

MainView:

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route
public class MainView extends VerticalLayout {

	public MainView() {
		UI.getCurrent().getPage().addJavaScript("/js/Chart.min.js");
	}
}

Chart.min.js was downloaded from the charts.js GitHub repository.
When running the tomcat and opening the MainView, I do get a error in my browser console: “SyntaxError: expected expression, got ‘<’”.

When trying to open the JavaScript file directly (http://localhost:8080/js/Chart.min.js), I see the following among other things: "[…]
This file is auto-generated by Vaadin. […]
". It seems like Vaadin acts like a proxy to serve the JavaScript file.

The internet browser (Firefox, Edge and Chrome) complains about a SyntaxError in the first line in that “proxied-file” with content:
<!doctype html>

I attached a screenshot of my Firefox console output.

Am I doing something wrong here?

Replaced attachment.
18396141.png

Hi,

If there is no static file /js/Chart.min.js then Vaadin will try to find a route.

Can you check the result of http://localhost:8080/js/Chart.min.js ?

If you don’t retrieve your javascript file, then it’s probably because you put Chart.min.js at the wrong place.

This file should be put in src/main/webapp/frontend/ when building a .war file and src/main/resources/META-INF/resources/frontend/ when building a .jar file.
(from thi blog post: https://vaadin.com/blog/vaadin-10-and-static-resources )

Thanks for your quick reply.

Indeed, the path under which the files were stored was wrong.

Another helpful link:
https://vaadin.com/docs/v16/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet