Issue on embedding a dashboard into my web applica...
# gooddata-cloudm
Menelaos Kotoglou
07/11/2023, 9:32 PMIssue on embedding a dashboard into my web application 🧵
Menelaos Kotoglou
07/11/2023, 9:38 PMI'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?
Menelaos Kotoglou
07/11/2023, 9:40 PMThe 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; Copy code
const backend = tigerFactory()
.onHostname('<https://seafair.cloud.gooddata.com>') // 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 />
</WorkspaceProvider>
</BackendProvider>localhost:3000Menelaos Kotoglou
07/11/2023, 9:41 PMAlso, 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?
m
Moises Morales
07/12/2023, 12:03 AMHi Menelaos, could you please confirm the React and GoodData UI version you using?
m
Menelaos Kotoglou
07/12/2023, 6:47 AMSure @Moises Morales
Copy code
@gooddata/sdk-ui": "^8.12.1
"react": "^17.0.1",Menelaos Kotoglou
07/12/2023, 11:05 AMDo we have any updates on the above team?
f
Francisco Antunes
07/12/2023, 2:23 PMHi 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
j
Jan Rehanek
07/12/2023, 2:51 PMCould you share your full package.json and the lock file?
Jan Rehanek
07/12/2023, 2:53 PMIn previous cases this error indicated that some dependency is pulling in React 18.
Jan Rehanek
07/12/2023, 2:54 PMIt’d be good to check that.
m
Menelaos Kotoglou
07/12/2023, 2:58 PMThanks, I just sent privately for sec reasons. Thanks for looking into it
j
Jan Rehanek
07/12/2023, 3:02 PMCould you also share the HAR file of this interaction? It would be good to see if there’s anything happening in the network tab.
m
Menelaos Kotoglou
07/12/2023, 3:06 PMSending you right now @Jan Rehanek. Thanks
m
Matyáš Kandl
07/12/2023, 3:58 PMHello @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";👀 1
m
Menelaos Kotoglou
07/12/2023, 4:09 PM@Matyáš Kandl that resolved the issue indeed, thank you! Are you fixing this issue in your next release too?
🙌 1
m
Matyáš Kandl
07/12/2023, 4:10 PM@Menelaos Kotoglou Great! Yes, in the upcoming release (v9), I think it should be resolved.
🙌 1