https://www.gooddata.com/ logo
Join Slack
Powered by
Hi, When I try to integrate GoodData UI in an exis...
# gooddata-platform
s
Hi, When I try to integrate GoodData UI in an existing react app, I get this message. Type '{ children: Element; backend: IAnalyticalBackend; }' is not assignable to type 'IntrinsicAttributes & IBackendProviderProps'. Property 'children' does not exist on type 'IntrinsicAttributes & IBackendProviderProps'.ts(2322) Does anybody know the solution?
j
Hi Sajjad. That’s a TS TypeError. Could you share with us a code snippet of the component where it originates?
s
Copy code
import React from 'react';
import logo from './logo.svg';
import './App.css';

import bearFactory, { ContextDeferredAuthProvider } from "@gooddata/sdk-backend-bear";

import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";

// or if your application will be hosted on a different host than the GoodData platform
const backend = bearFactory()
    .onHostname("<https://mydomain.on.gooddata.com>") // this should be the domain where the GoodData platform is hosted
    .withAuthentication(new ContextDeferredAuthProvider());

function App() {
  return (
    <BackendProvider backend={backend}>
          <WorkspaceProvider workspace="<your-workspace-identifier>">
              <YourApp/>
          </WorkspaceProvider>
    </BackendProvider>

  );
}

export default App;
@David Munka Can you please get me some help with this issue?
j
The code provided looks nearly identical to the samples available on our website. I am not sure what to take from it - I’ve asked the dev team for advice. Please hold on for a bit.
s
sure, thanks.
I have create a new/simple react app and trying to embed GoodData elements. I am not using contexts in this case.
j
From the code provided, it’s really not clear to me what could throw that error. Any chance you didn’t include anything that could be relevant?
s
It is just very very simple app, which I created using npx create-react-app mygdapp --template typescript and then, I followed all the instructions from your guide.
It is literally just one file
I tried to add style files, but they were giving another error, so, just removed them
Sorry, CSS files dont have any effect, if we add them, or not.
j
Did you have a look at https://github.com/gooddata/gooddata-create-gooddata-react-app? There’s a way of creating a simple GD app with all the backend config already set-up for you.
Copy code
npx @gooddata/create-gooddata-react-app my-app
s
I am able to successfully run it independently.
But, Now, I am trying to integrate in an existing react app.
This is why, I am trying it the other way.
j
Hmm.
What are you using instead of the placeholder 
<YourApp/>
?
s
I have removed it.
We will use dashboard here
the dashboard component.
p
How are you integrating it into an existing app? Can you show us example of that?
s
It is just very very simple app, which I created using npx create-react-app mygdapp --template typescript Then, I just followed the instructions in App.tsx
p
So you have just App.tsx and when you start the app, it will not compile and throws the error above? And your App.tsx looks exactly as the posted snippet above?
s
yes
p
You said that you are able to run it independently however? What does that mean? Sorry for all the clarifications, I just want to understand your situation.
s
and made SSO Login work with that
Now, I am creating a standalone react app and embed GoodData components in it.
Later, I will do the same for a bigger react app
p
Just FIY create-gooddata-react-app does not need to be cloned but should be used as npm library via npx runner that will guide you through the steps of creating the new app and it will bootstrap a project for you with everything.
You can try it and see how everything is set up.
s
ok sure, I will try this, thanks.
Sorry, I did not clone it, I used it with npx
and created a new app using npx
and it worked
Now, I am in this scenario
What does this have to do with above git repository
Copy code
npx @gooddata/create-gooddata-react-app my-app
This command worked fine
and it did create an app, which is good.
But, Now, I need to move forward.
and integrate this into another react app
this scenario
p
Can you post again how does content of your 
App.tsx
looks like now? You said that it looks bit different then the one in the example (you deleted some stuff). Also does the file has 
.tsx
extension?
s
It was .tsx
I found a workaround, I created another component and included in App.tsx
I changed component's extension to JS
and it looks like, the problems have gone for a bit
and now, I am on next step
image.png,image.png
p
It seems that something in that code was not TS compatible
s
I have attached the code screenshots
p
This is some problem in your application that is not GD related imho. Possibly it could be the JS file used in TS app. Maybe webpack is not configured to compile and serve source map for this JS file. However, it seems that app was compiled, just source map will be missing. Maybe you can ignore it for your POC.
s
JS file actually resolve the issue for now.
Let me show that as well.
image.png
if I change test.js back to test.tsx
p
just out of curiosity, what React version are you using?
s
18.2.0
p
can you test it with 17? Version 18 is imho not compatible yet, this could be the issue. Our react create gooddata app uses version 17
You can see it here as well: https://sdk.gooddata.com/gooddata-ui/docs/about_gooddataui.html (Supported technologies)
s
If I keep it in JS file, will it be an issue?
p
This is imho why React.FC types are not compatible
s
If I keep my overall app with latest react and keep using GD with JS.
Will this be an issue?
I am trying to understand the possible outcomes.
p
Not sure, probably not but you can stumble upon other issues as well as there are reasons why it is not supported yet. There are some dependencies which we use in versions that are not compatible with React 18. You will get some strange issues and app will possibly not work. We are currently working on the React 18 compatiblity. However, I’m not sure when it will release
JS file should be fine. React 18 will be problem as you will go. Possibly it could work for simple POC but it can break.
Possibly search for older version of create react app that used React 17 and bootstrap your custom app with that version.
s
ok got it, thanks.
Thank you for explaining the situation.
p
Happy to help. Sorry I was not able to get to the root of the problem sooner.
s
No problem, thanks
j
I’ll make a note about checking the package.json file in future type-related issues. Thanks for your patience Sajjad.
Open in Slack
PreviousNext
Powered by