jsComponent - No JavaScript init function found

Support
#1

Hi,

Hopefully I’m missing something silly, but I can’t seem to find why I’m getting the following error:

image

The XML descriptor:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://jmix.io/schema/ui/window"
        caption="msg://defaultMap.caption">
    <layout>
        <jsComponent id="map"
                     initFunctionName="com_company_mapbox_javascript_MapBox">
            <dependencies>
                <dependency path="vaadin://mapbox/mapbox-connector.js"/>
                <dependency path="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"/>
                <dependency path="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css"/>
            </dependencies>
        </jsComponent>
    </layout>
</window>

The JavaScript connector:

com_company_mapbox_javascript_MapBox = function () {
    connector = this;
    let element = connector.getElement();
    let mapboxgl.accessToken = 'myAccessToken';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/my-account/my-style',
        center: [-87.661557, 41.893748],
        zoom: 10.7
    });
}

This is in testing an implementation of a MapBox API. I’m currently pretty awful at getting the jsComponent to work in any capacity, but from the tutorial, it’s supposed to be pretty simple to add.

What am I doing wrong?

Thanks,
Adam

#2

Hi!

There is a suspicion that the connector is located in the wrong directory.
Could you please describe your project configuration in more detail?

It would be great if you could provide a small test project.

Regards,
Dmitriy

#3

Sure. Here’s a test project:
mapbox.zip (89.5 KB)

1 Like
#4

I have done some superficial research into your problem.
The problem is in the js-connector code.

If you open the client-side console in DevTools [Control+Shift+J or Command+Option+J (Mac)], you will see that the error is in the fifth line of the controller.

    let mapboxgl.accessToken = 'myAccessToken';

You need to make changes to your controller to make it work correctly.

I can’t provide the full solution as it will take too much time. It will be necessary to read the third-party-api documentation.
I hope my research will help you move forward in solving your problem.

Regards,
Dmitriy