Hi everyone I am trying to embed an Insight in a ...
# gooddata-ui
Hi everyone I am trying to embed an Insight in a react app created with
pnpm create vite
The following is my App component. The code for • WorkspaceListProvider • useAuth I copied from the toolkit create-react-app example.
Copy code
import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";

import { useAuth } from "@/contexts/Auth";
import { WorkspaceListProvider } from "@/contexts/WorkspaceList";
import { InsightView } from "@gooddata/sdk-ui-ext";
import { Insights } from "../../goodDataCatalogOut";

function App() {
    const { backend } = useAuth()
    console.log("Backend", backend)
    return (
      <BackendProvider backend={backend}>
          <WorkspaceProvider workspace="d3d7aea47708404396d01d00fa971c8f">
            <div>Hi there</div>
            <InsightView insight={Insights.Cases}/>

export default App;
The result is: The page loads and displays the insight for 1 second, but then the insight disappears. There is no error, not in the browser console and not in the terminal where vite server is running. What I have done: I set up CORS for httplocalhost5173 (in my good data trial account cloud) What I haven't done: • I have not set up a proxy. Because the application created with the toolkit also works without setupProxy.js. • I am not running on https, I am running on http. Do I need to run my dev server on https? What am I doing wrong? Please help.
Hi Frank, When setting CORS the allowed origin URI must start with https://. Please make sure to use the secure protocol and let us know if you are still having issues
Hey Moises Thank you for your anser. What I did: • added https://localhost:5173 to my good data cloud trial account • created a localhost.key and localhost.crt file (using openssl) • added the following server object to vite.config.ts
Copy code
  https: {
    key: fs.readFileSync(localhost.key),
    crt: fs.readFileSync(localhost.crt)
• restarted the dev server on https://localhost:5173 Result: Insight is displayed for ~300ms and then disappears. No errors in the browser/terminal.
May I know what React version are you using and whether you’re using the latest version of GoodData UI?
Yes of course: gooddata: 8.12.1", react": "^18.2.0",
Thanks. Let me double check this internally
❤️ 1
Hi Frank. I am afraid we’re not compatible with React 18 yet.
It’s on the roadmap and the SDK version 9.0.0 will lay the groundwork for it, but at the moment React 17 is as high as you can go.
From the latest information I’ve got, however, support for React 18 should come in Q3.
Hey Jan, I will try with react 17 and see if it works. thank you for your detailed response. Best regards Frank
👍 1
Hey Jan So now I am using react@17.0.2 react-dom@17.0.2 but I still have the same issue. Here is my package.json
Copy code
  "name": "good-data-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "refresh-md": "./node_modules/.bin/gdc-catalog-export"
  "dependencies": {
    "@gooddata/sdk-backend-tiger": "^8.12.1",
    "@gooddata/sdk-model": "^8.12.1",
    "@gooddata/sdk-ui": "^8.12.1",
    "@gooddata/sdk-ui-charts": "^8.12.1",
    "@gooddata/sdk-ui-dashboard": "^8.12.1",
    "@gooddata/sdk-ui-ext": "^8.12.1",
    "@gooddata/sdk-ui-filters": "^8.12.1",
    "@gooddata/sdk-ui-geo": "^8.12.1",
    "@gooddata/sdk-ui-pivot": "^8.12.1",
    "classnames": "^2.3.1",
    "formik": "^2.2.9",
    "lodash": "^4.17.15",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router-dom": "^5.3.0",
    "react-router-use-location-state": "^3.1.2",
    "use-location-state": "^2.3.1"
  "devDependencies": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.1",
    "@gooddata/catalog-export": "^8.12.1",
    "@vitejs/plugin-react": "^4.0.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
when I visit the site, I get redirected to gooddata to log in. After log in, I get redirected to my page and the gooddata-loading sign appears. For ~300ms the insight appears as well, but then disappears again. No errors in the browser/terminal.
Is there anything in the network tab of the browser?
With the
Preserve log
setting checked.
I think the quickest way to help you with this would be if you packaged a sort of minimal reproducer (all the code needed to reproduce the issue) and sent it to me. I can run it locally and see if I can reproduce and resolve it.
I couldn't find an issue in the network tab.. So I sent you the code as .zip in a personal message.