Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
batra_vivek
Contributor
Contributor

Require.js error in react mashup

Hi

I am using mashup to integrate Qlik Sense SaaS in my react based web application. I am able to open the app and get hold of the visualization object as well. But when it comes to rendering, only the Visualization title is rendered not the actual chart data, even though that the visulization object has the data. I get the below errors in conolse.

batra_vivek_0-1659001023231.png

 

I have also added my localhost:3333 to the white list while creating the  Web Integration in Console in my tennant.

Hope to get a solution as this has been bothering me from quite some time now.

Thanks

Vivek

 

Labels (4)
4 Replies
rzenere_avvale
Partner - Specialist II
Partner - Specialist II

Hey there @batra_vivek ,

Could you try to host your page on HTTPS instead of HTTP?
In the past I saw a similar error, due to this

I hope this helps,
Riccardo

batra_vivek
Contributor
Contributor
Author

More puzzeling for me is, I created a new react app with create-react-app which is again running on "HTTP"  http://localhost:3000 and the charts are loading fine.

With that working in a bare web app, I am trying to integrate the charts in my existing react web app and then it refuses to work even though the console errors are same in both the cases.

No idea how to troubleshoot it.

vighneshg
Contributor II
Contributor II

@batra_vivek  As you said when you created test app with create-react-app, it was working fine right?

But when you implement in existing react web app. It doesn't work.  I assumed you must have other js projects files in that web page where you are loading charts. See to it that you load qlik require.js file at last. 

for eg. if web page has cdns like popper.js , jqurey.js , require.js and your main.js files. Then  first load popper.js and jqurey.js and at last load require.js and then load your mashup file main.js.

sometimes require.js gets conflicted with other js files as it has  anonymous define function. I am only guessing as I don't know your whole web app code.

Regards,
Vighnesh Gawad
vivek_batra
Partner - Contributor III
Partner - Contributor III

Hi @vighneshg 

Thanks for your message. I am posting my code below. I think I am doing the way as you suggested.

<!DOCTYPE html>
<html>

<head>
  <!-- Version {!major!}.{!minor!}.{!maintenance!}.{!build!} -->
  <title>Daleel Smart Portal</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="/css/materialize.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="/css/materialize.extensions.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="/css/materialize.icons.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="/css/bootstrap-datetimepicker-standalone-4.17.45.css"
    media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="/css/bootstrap-datetimepicker.css" media="screen,projection" />
  <lin type="text/css" rel="stylesheet"
    href="https://5mgt7zl1n5abmk4.sg.qlikcloud.com/resources/autogenerated/qlik-styles.css" media="screen,projection" />
  <script type="text/javascript" src="/vendor.js"></script>
  <script type="text/javascript" src="/app.js"></script>
  <script type="text/javascript">
    var React = require('react');
    var ReactDOM = require('react-dom');
    var indexPage = require('pages/index').default;
    document.addEventListener('DOMContentLoaded', function () {
      ReactDOM.render(React.createElement(indexPage, {}), document.querySelector('#indexContainer'));
    });
  </script>

  <script type="text/javascript"
    src="https://5mgt7zl1n5abmk4.sg.qlikcloud.com/resources/assets/external/requirejs/require.js"></script>


</head>

<body style="background-color: #e3f2fd;">
  <div id="indexContainer">
  </div>
</body>

</html>
import React from 'react';
import * as Config from 'utils/configuration';
import * as Actions from 'data/qlik/actions';


export default class QlikConnection extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.openQlikConnection();
  }

  openQlikConnection() {
    var me = this;
    var config = {
      host: Config.HOST,
      prefix: Config.PREFIX,
      port: Config.PORT,
      isSecure: Config.IS_SECURE
    };
    requirejs.config({
      baseUrl: Actions.baseUrl() + '/resources',
      webIntegrationId: Config.WEB_INTEGRATION_ID
    });

    requirejs(["js/qlik"], function (qlik) {
      qlik.setOnError(function (error) {
        me.props.callback({ errorMessage: 'Error on loading QVF from Qlik ' + error, app: null });
        console.log(error);
      });

      var app = qlik.openApp(Config.APP_ID, config);
      var state = { errorMessage: null };
      state[me.props.appName] = app;
      me.props.callback(state);
    });
  }

  render() {
    return <span />;
  }
}

 

export default class QlikObject extends React.Component {

	constructor(props) {
		super(props);
		this.state = {};
	}

	componentDidMount() {
		this.getObject();
	}

	shouldComponentUpdate(nextProps) {
		return this.props.qlikId != nextProps.qlikId;
	}

	getObject() {
		var that = this;
		//this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => { that.setState({ model: model }) });
		this.props.app.visualization.get(this.props.qlikId).then(v => { v.show(this.props.chartId) });
	}

	componentDidUpdate() {
		if (this.state.model) {
			this.state.model.close();
		}
		this.getObject();
	}

	componentWillUnmount() {
		if (this.state.model) {
			this.state.model.close();
		}
	}

	render() {
		return <div style={{ height: 300, width: 700 }} id={this.props.chartId} />;
	}
}

 I have removed all the other js files that I was loading but still the issue persists.