topic Re: Require.js error in react mashup in Integration, Extension & APIs

Require.js error in react mashup

batra_vivek — Thu, 28 Jul 2022 09:37:11 GMT

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.

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

Re: Require.js error in react mashup

rzenere_avvale — Thu, 28 Jul 2022 09:21:04 GMT

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

Re: Require.js error in react mashup

batra_vivek — Thu, 28 Jul 2022 10:04:57 GMT

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.

Re: Require.js error in react mashup

vighneshg — Wed, 03 Aug 2022 11:37:59 GMT

@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.

Re: Require.js error in react mashup

vivek_batra — Fri, 05 Aug 2022 05:06:05 GMT

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>  <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.