Issue on embedding a dashboard into my web applica...
# gooddata-cloud
Issue on embedding a dashboard into my web application 🧵
I've already set up a PoC for that and have done it before. What I have up to now is I've installed the necessary dependencies and have imported the dashboard component into my app. It's rendering like that, but the insights in it won't render. Why is this happening?
The code I've added to render the dashboard
Copy code
import React from 'react';

import '@gooddata/sdk-ui-dashboard/styles/css/main.css';
import { idRef } from '@gooddata/sdk-model';
import { Dashboard } from '@gooddata/sdk-ui-dashboard';

const dashboard = idRef('***');

const GooddataDashboard = () => <Dashboard dashboard={dashboard} />;

export default GooddataDashboard;
And this is what calls the React component
Copy code
const backend = tigerFactory()
    .onHostname('<>') // this should be the domain where the GoodData Cloud or <http://GoodData.CN|GoodData.CN> is hosted
    .withAuthentication(new TigerTokenAuthProvider(process.env.REACT_APP_GOODDATA_TOKEN));
<BackendProvider backend={backend}>
          <WorkspaceProvider workspace="079ded41cc594b478b3e76bf04295715">
            <GooddataDashboard />
This is how I authenticate since I'm currently developing in
Also, all the network calls seem to be successful brining successfully data in, however, this is what I get in the console. Can the getDashboardWithReferences issue cause that? If so, how should I resolve? Thank you in advance?
Hi Menelaos, could you please confirm the React and GoodData UI version you using?
Sure @Moises Morales
Copy code
@gooddata/sdk-ui": "^8.12.1
"react": "^17.0.1",
Do we have any updates on the above team?
Hi Menelaos, sorry for the delay. We’re asking for help from the Technical Support Team on this, we’ll be back in touch soon!
👀 1
Could you share your full package.json and the lock file?
In previous cases this error indicated that some dependency is pulling in React 18.
It’d be good to check that.
Thanks, I just sent privately for sec reasons. Thanks for looking into it
Could you also share the HAR file of this interaction? It would be good to see if there’s anything happening in the network tab.
Sending you right now @Jan Rehanek. Thanks
Hello @Menelaos Kotoglou I think this is some mistake in our css styles. If I'm correct, I was fixing this few days ago. To "workaround" it now, please try to add the following css imports (and maybe dependencies):
Copy code
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-dashboard/styles/css/main.css";
Let me know, if this helps, thanks.
👀 1
@Matyáš Kandl that resolved the issue indeed, thank you! Are you fixing this issue in your next release too?
🙌 1
@Menelaos Kotoglou Great! Yes, in the upcoming release (v9), I think it should be resolved.
🙌 1