Qlik sense integration with ArcGIS maps using ReactJs

[sreekanta_manuru]

Hi All, i am trying to create a application Qlik Sense with ESRI using React JS application. Application showing Powered By ESRI message and but maps are not loading. i tried  with Rest Api/ @ArcGIS Core/ Esri-loaders also. but same issue. Application is creating many bundles with related assets in folder. Can you please suggest me to get direction to resolve Map issue. Currently i am using Qlik Sense Desktop - 14.54.15 (with custom objects).

Sample Map load Code:

1) index.js - simple  ReactJs

import React, { useState,useRef, useEffect } from "react";

import ArcGISMap from "@arcgis/core/Map";

import MapView from "@arcgis/core/views/MapView";

import '../../index';

//import "./style.css";

//import "../../../node_modules/@arcgis/core/assets/esri/css/main.css";

import esriConfig from "@arcgis/core/config";

//import '@arcgis/core/assets/css/map.css';

//import "../../../node_modules/@arcgis/core/assets/esri/themes/light/main.css";

//import { loadModules } from "esri-loader";

esriConfig.assetsPath = "./assets";

//esriConfig.apiKey = "JyLU9y3QUHvrGg2tXwJ4di-bEE8tyrMUk68xGnzI2byEliOorHa3ZYr1cYPDy9Q1cZNOAZ2JlY3LcjEzWsBzjlTEuT6-9WNT06q_wlN6nUmOMRwpgLwFVvmuByb6OmEnRhitq6q83v0xqRJ9d9oiHg..";

//console.log(main);

export const Map = () => {    

    const mapDiv = useRef(null);

    console.log("Map instance");

    //const view = useRef(null);

    useEffect(() => {

      if (mapDiv.current) {

        const map = new ArcGISMap({

          basemap: "streets-vector",          

        });      

        const view = new MapView({

          map: map,

          container: mapDiv.current,

          center: [-95.7129, 37.0902],

          zoom: 3          

        });

        console.log( "props--" + map.basemap.title + view.zoom);        

      }

    }, []);    

    return <div id="mapDiv" style={{ padding: 0, margin: 0, height: "1000px", width: "1000px" }} ref={mapDiv} />;

}

2) index.js - - second ReactJs added qlik.openApp

export const Map = () => {    

    const mapDiv = useRef(null);

    console.log("Map instance");

    //const view = useRef(null);

    useEffect(() => {

      const loadQlikObj = async() => {

        const config = {

          host:"localhost",

          prefix:'/',

          port:443,

          isSecure:true,

          //webIntegrationId: 'web-integration-id-here' //only needed for SaaS editions

        }        

        //appid

        //const app = await qlik.openApp('C:/Users/smanuru/Documents/Qlik/Sense/Apps/SreeTest.qvf', config);

        //var app = qlik.openApp('2abac31e-3b46-4b78-8bxf-c5cea1d2514d', config);  

        if (mapDiv.current) {

          const map = new ArcGISMap({

            basemap: "streets-vector",          

          });      

          const view = new MapView({

            map: map,

            container: mapDiv.current,

            center: [-95.7129, 37.0902],

            zoom: 3          

          });

        }

        console.log( "props--" + map.basemap.title + view.zoom);        

      };

      loadQlikObj();

    }, []);

    return <div id="mapDiv" style={{ padding: 0, margin: 0, height: "1000px", width: "1000px" }} ref={mapDiv} />;   

}

Below error i am getting: 

[jprdonnelly]

@sreekanta_manuru - thank you for including the error screenshot, unfortunately it is very blurry when trying to read the details. Can you provide a higher-res screenshot, it might help others to collaborate.

Thanks!