https://www.gooddata.com/ logo
Join Slack
Powered by
Hello, I'm trying to render `Dashboard` in my rea...
# gooddata-ui
d
Hello, I'm trying to render 
Dashboard
in my react application by following these instructions and getting the error
Copy code
Uncaught Invariant Violation: useBackendStrict: IAnalyticalBackend must be defined. Either pass it as a parameter or make sure there is a BackendProvider up the component tree.
This my React component:
Copy code
const GoodDataWorkspace: FC<GoodDataWorkspaceProps> = ({ token, workspace, selectedDashboard }) => {
  const backend = tigerFactory()
    .onHostname(process.env.REACT_APP_GOODDATA_URL)
    .withAuthentication(new TigerTokenAuthProvider(token));
  
  return (
    <BackendProvider backend={backend}>
      <WorkspaceProvider workspace={workspace}>
        <GooddataDashboard selectedDashboard={selectedDashboard} />
      </WorkspaceProvider>
    </BackendProvider>
  );
};
and I also have all relevant dependencies in 
package.json
Copy code
"@gooddata/api-client-tiger": "8.12.2",
    "@gooddata/sdk-backend-tiger": "8.12.2",
    "@gooddata/sdk-model": "8.12.2",
    "@gooddata/sdk-ui": "8.12.2",
    "@gooddata/sdk-ui-all": "8.12.2",
    "@gooddata/sdk-ui-charts": "8.12.2",
    "@gooddata/sdk-ui-dashboard": "8.12.2",
    "@gooddata/sdk-ui-ext": "8.12.2",
    "@gooddata/sdk-ui-geo": "8.12.2",
    "@gooddata/sdk-ui-kit": "^8.12.1",
    "@gooddata/sdk-ui-pivot": "^8.12.1",
Also, I tried adding the peerDependencies as suggested in this relevant post , but still getting the same error
r
Hi Danai, Radek from the GoodData technical team here 🙂 May I ask, why TigerTokenAuthProvider? The use of that auth method in UI applications is somewhat discouraged due to the need to keep the token in the code (as per docs).
d
Hi Radek! No specific reason for using that, just followed similar implementation from another app. Do you suggest using this instead?
Copy code
const backend = tigerFactory()
    .onHostname(process.env.REACT_APP_GOODDATA_URL)
    .withAuthentication(new ContextDeferredAuthProvider(redirectToTigerAuthentication));
r
Definitely, plus I'm secretly hoping this will help as well, I tried to use your snippet in my environment (with ContextDeferredAuthProvider instead) and was unable to break it, so fingers crossed 🙂
d
Unfortunately I'm still getting the same error
r
Hmm, okay, unlucky.. I'd say there's a pretty good chance GD.UI is getting tripped up if backend is declared too late for it. You define a GooddataDashboard component to use in the GoodDataWorkspace, can you share that one as well? We can always move to private messaging if you don't want to share too much out here 🙂
d
great, thank you! Lets continue to private 🙂
@Radek Novacek lets move our conversation here for visibility -adding colleague @Konstantinos Koroneos Unfortunately, as mentioned in our private messages, we are unable to provide you with a development environment to reproduce the error. Therefore, we would appreciate it if you could suggest a workaround or provide guidance on how to fix it, as this issue is currently blocking our progress. In this thread, you can find the GoodData versions and the relevant components that we have implemented. Our working versions are:
Copy code
typescript: "^4.7.4"
react: "^17.0.2"
node: v14.21.3
When attempting to render those dashboard components, we are encountering the issue as seen in the image:
k
@Radek Novacek any updates here? we've been struggling with this for 2 weeks now and we need your assistance to move fwd
👀 1
d
fyi @Konstantinos Koroneos I was able to create a dev environment which reproduces the error as shown above, and sent the zip file to @Radek Novacek
🙌 1
r
Perfect, thank you both, I'll share this with the devs and come back to you as promptly as I can! 🙂
🙏 2
Hi Danai, Konstantinos, hope you're having a calm Friday! Just to keep you updated, I should have some dev feedback on this by Monday 🤞
🙏 1
🤞 1
Hi @Danai Chronopoulou @Konstantinos Koroneos, as promised, dev feedback:
Backend and workspace entities are not transfered via contexts to the inner components which consume them. Easiest fix for me was to propagate them manually as a prop to the Dashboard component
```const GooddataDashboard: FC<GooddataDashboardProps> = ({ selectedDashboard }) => {
const classes = useStyles();
// take entities from context of this app
const backend = useBackendStrict();
const ws = useWorkspaceStrict();
// propagate them to Dashboard component via props
return selectedDashboard ? (
<Dashboard dashboard={idRef(selectedDashboard.id)} backend={backend} workspace={ws}/>
) : null;
};```
Then I end up on 401 error for all requests because I expect provided token is not valid.
I would honestly upgrade react, node and then UI SDK too in their project.
Essentially, the above suggestion would be a way to make this work for your current setup, though I do agree with my colleague that if it's at all possible, working with more up-to-date versions of everything is a good idea 🙂
👀 2
d
Thank you @Radek Novacek. Please note that we cannot afford to upgrade our packages at the moment since this requires a lot of changes and capacity from our team. Therefore, we need to find a workaround to work with the existing ones. I tried the fix as you suggested above, and provided a valid token so that all requests wont get 401 and worked successfully. However, now its failing with a new error:
👀 2
r
Understood on the upgrades! As far as the issue goes, is this really a new error? I feel like we're back where we started with the 
IAnalyticalBackend must be defined
😅
d
Well, the difference is the 
useBackEndStrict
in the first error and the 
AttributeFilter
in the second. Also be aware that by implementing the fix you recommended and by giving a valid token, all apis worked fine and then this "new" error came up
r
Hmm, gotcha, I'll go back to the devs with this. It's unfortunate you keep running into issues, I swear usually the process isn't so bumpy 😅
🤞 1
Hi Danai, Konstantinos, Our devs are advising to unify all the UI SDK packages on the same version - 8.12.3 - and ensure that even in yarn.lock it was resolved to the same version for all packages. There's a possibility that the mismatched/mixed versions are causing this issue, and this is the best way to rule it out without a full upgrade of the whole environment. 👀
👀 1
d
Hey Radek, I followed your suggestion with the exact steps: • Updated all GoodData packages to version 
8.12.3
• Deleted 
node_modules
and 
yarn.lock
• Ran 
yarn install
While starting the project with 
yarn start
, I encountered numerous TypeScript errors. For example, refer to the first attached screenshot. Even if I manage to resolve the specific error by replacing 
ReactRouterRoute={Route as React.JSXElementConstructor<any>}
, which is not an optimal solution but just a quick fix, and try to compile again, another TypeScript error occurs, and this keeps happening. So, I suspect that upgrading GoodData packages has caused a version incompatibility. How should we approach and resolve this? You already have the reproducer with all our package versions. Can you please check and let us know? cc @Byron Antoniadis @Konstantinos Koroneos
b
Hello @Radek Novacek - have you used the reproducer? perhaps by using it we could avoid having back-n-forth with errors on start-up. Team, this is blocking us to the point we are losing revenue from not being able to release in the past 25 days.It has become a critical bug for us. Please, can we increase the speed of iteration here? CC @Greta @David Munka
r
Hi all, it's not actually incompatibility due to GoodData packages, but most likely a a mismatch in 
@types/react
- related Stack Overflow discussion. I'm very sorry for the delays in troubleshooting this, however, with the GD.UI version mismatch solved, once you get over this React version related issue, we should finally be over all the issues here.
👀 1
Also, just for added transparency, @Greta already reached out to me previously to give this priority as well, and we are trying to drive the issue to a fast resolution - which, as I mentioned, I am personally hoping to see once the latest React issue is addressed. 🤞
d
Thank you Radek! I am currently on it 🙏
🙏 1
Hi again @Radek Novacek, We've managed to resolve the mismatch as you pointed out, and finally, the app is running without errors. However, it seems that the Dashboard components are not being rendered as expected, missing all the styles and data as shown in the image. Please advise on how to fix this. Thank you.
👀 1
There are a few warnings in the console, if that helps
r
I've updated our dev thread with this info as well, the previous one I could manage myself, but this will need dev feedback - keeping in mind the business need, I will push for a prompt answer!
🙏 1
Can you see if network requests all end up okay on page load? 👀 The errors themselves are very React-specific, but personally I'd think you would see them before too, since these are a safeguard from v16.3.0 up 🤔
d
sure, all API request statuses are 200 OK
👍 1
r
Then I would check elements and styles, if everything is ok. We saw similar issues when a chart/data was rendered but eg. in a hidden container or similar. This is of course assuming all your CSS imports are in place, but I wasn't even going to ask about those since they were correct in the reproducer too 🙂
d
The reproducer is similar to my environment, with some changes based on the issues above: 1. Added backend and ws in Dashboard component
Copy code
const backend = useBackendStrict();
  const ws = useWorkspaceStrict();
2. Upgraded all packages:
Copy code
"@gooddata/api-client-tiger": "8.12.3",
    "@gooddata/sdk-backend-tiger": "8.12.3",
    "@gooddata/sdk-model": "8.12.3",
    "@gooddata/sdk-ui": "8.12.3",
    "@gooddata/sdk-ui-all": "8.12.3",
    "@gooddata/sdk-ui-charts": "8.12.3",
    "@gooddata/sdk-ui-dashboard": "8.12.3",
    "@gooddata/sdk-ui-ext": "8.12.3",
    "@gooddata/sdk-ui-geo": "8.12.3",
    "@gooddata/sdk-ui-kit": "^8.12.3",
    "@gooddata/sdk-ui-pivot": "^8.12.3",
So, all CSS styles and elements are in place as you can see in the reproducer
r
So for the case of the actual dashboard, if you try to inspect it, how are the styles looking? Is it actually loading completely style-free, or does it just look style free due to React being unhappy with something?
👀 1
d
it seems that there are styles on elements 🤔
r
Can you try to find an SVG element with a 
highcharts-root
class for the first widget and check that it and all its parents have a meaningful size? It will be inside DIV class 
visualization
.
d
found it but as you can see the last 
<div class="visualization-container-measure-wrap">
which should have the child: svg 
highcharts-root
is empty
r
Alrighty so, according to the dev,
Complete React subtree is missing which can have multiple reasons
Could I ask you to try and just render a plain Dashboard without providing any external filters? Just to ensure that the issue is in the Dashboard component itself and not in your integration with your React components.
d
how should I do this? 
<Dashboard dashboard={idRef(selectedDashboard.id)} backend={backend} workspace={ws} />
By external filters you mean the params that I'm passing?
r
In the most plain way possible, I'd try with hardcoding the Dashboard idRef for this as well, just to make sure it's not the selector causing weirdness by switching the Dashboard views. Backend and WS should be fine 🙂
d
So I hardcoded the id, but still doesnot change anything 
<Dashboard dashboard="605c1c35..." backend={backend} workspace={ws} />
hey @Radek Novacek , do we have any updates on the above?
r
Hi Danai, I was able to reproduce the issue you're seeing, so I can share more info with the devs - I've been a little busy dealing with a platform availability issue this morning, but looking to continue as soon as that's done!
🙏 1
👀 1
d
Hello @Radek Novacek. Did you have the chance to proceed with the issue?
r
Hi Danai, still a work in progress I'm afraid, but hoping to have more to share today, as things have finally calmed down somewhat 🙂 I'll keep you updated!
🙏 1
For some bonus context, I tried to follow the same steps as you did using your reproducer (GD version consolidation > React version consolidation) and then hardcode everything to straight up just App.tsx (BackendProvider > WorkspaceProvider > Dashboard), and getting the same results, so at least we more or less know it's not your implementation 🤔
👀 1
d
Hey @Radek Novacek , do you think we can have any updates this week?
r
Definitely @Danai Chronopoulou!
k
Hello @Radek Novacek ! At this point i have to express how dissatisfied we are with the support received on this case. Its been more than a month now, and the iterations are really slow. As @Byron Antoniadis mentioned, our business is being impacted for a long time now. Can you please do everything needed for this to be resolved ASAP?
b
CC @Greta @David Munka
👀 1
g
@Radek Novacek any updates on the case? 🙂
r
Hi all, I'm very sorry for the delay! And thank you Greta for pinging me, the notification got a little lost 😞 Let me come back to you on this, there was a lot on my plate recently - I will give you a progress update by the end of business day today latest, so please bear with me in the meantime! 🙏
Hi all, I've been a little too optimistic on that I'm afraid, but I'm on it and will let you know more during tomorrow as well!
👀 2
k
Do we expect to have a resolution to this issue any time? Can we get a Yes/No answer, and an ETA so we can adjust our business priorities accordingly please?
b
Team, what’s happening here? @Greta I am not getting a reply from you on our private chat as well. If we don’t get an ETA you can stick to immediately, we will have to consider terminating our relationship
g
Hi @Radek Novacek any updates here please? 🙂
r
Hi @Greta, @Byron Antoniadis, please accept my apologies for the silence on this! The issue here is a fairly complex one, given that you are working on both older React and older UI SDK; additionally, the fact that this is an older SDK version makes it more difficult to allocate extra developer time to deep diving into this - our dev team is unfortunately almost always using all the time they have available between them working towards new features and addressing issues found in later SDK versions 😞 I've spent quite some time on my end trying to troubleshoot this as well, and while I was able to replicate your issues on v8, I was not able to figure out any package/dependency changes that could resolve this (especially as changing dependencies is notoriously not a very nice process to begin with). The above, plus the fact that version 8 has reached EOD on July 27, 2023, is why both mine and the developers' main suggestion was to try and upgrade from v8 to any v9 SDK - I'm confident that this should outright fix any issues you're seeing, and is overall a good step to spend time on since you'll get to make use of all the hard work our devs are putting into v9.
👀 3
Open in Slack
PreviousNext
Powered by