Hi everyone I am trying to embed an Insight in a react app c GoodData #gooddata-ui

Hi everyone I am trying to embed an Insight in a ...

Frank Imhof

07/03/2023, 5:14 PM

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}>
        <WorkspaceListProvider>
          <WorkspaceProvider workspace="d3d7aea47708404396d01d00fa971c8f">
            <div>Hi there</div>
            <InsightView insight={Insights.Cases}/>
          </WorkspaceProvider>
        </WorkspaceListProvider>
      </BackendProvider>
    );
}

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.

Moises Morales

07/03/2023, 5:24 PM

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

Frank Imhof

07/03/2023, 6:16 PM

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

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

Moises Morales

07/03/2023, 6:22 PM

May I know what React version are you using and whether you’re using the latest version of GoodData UI?

Frank Imhof

07/03/2023, 6:50 PM

Yes of course: gooddata: 8.12.1", react": "^18.2.0",

Moises Morales

07/03/2023, 7:01 PM

Thanks. Let me double check this internally

❤️ 1

Jan Rehanek

07/04/2023, 8:56 AM

Hi Frank. I am afraid we’re not compatible with React 18 yet.

Jan Rehanek

07/04/2023, 8:56 AM

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.

Jan Rehanek

07/04/2023, 8:57 AM

https://sdk.gooddata.com/gooddata-ui/docs/supported_versions.html#supported-technologies

Jan Rehanek

07/04/2023, 9:00 AM

From the latest information I’ve got, however, support for React 18 should come in Q3.

Frank Imhof

07/04/2023, 12:21 PM

Hey Jan, I will try with react 17 and see if it works. thank you for your detailed response. Best regards Frank

👍 1

Frank Imhof

07/04/2023, 12:42 PM

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"
  }
}

Frank Imhof

07/04/2023, 12:46 PM

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.

Jan Rehanek

07/04/2023, 12:47 PM

Is there anything in the network tab of the browser?

Jan Rehanek

07/04/2023, 12:47 PM

With the

Preserve log

setting checked.

Jan Rehanek

07/04/2023, 12:49 PM

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.

Frank Imhof

07/04/2023, 12:55 PM

I couldn't find an issue in the network tab.. So I sent you the code as .zip in a personal message.

Open in Slack

Previous Next