https://www.gooddata.com/ logo
Join Slack
Powered by
Hey, seems that I'm facing an issue while trying t...
# gooddata-cn
m
Hey, seems that I'm facing an issue while trying to embed an insight in my current React application 🧵
As I've been following this guide, I've come until step 3 when I'm trying to import these 
*import* { BackendProvider, WorkspaceProvider } *from* "@gooddata/sdk-ui";
Seems that there is an incompatibility between material UI and the sdk-ui elements. Do we have any known issues about what the issue may be? My package.json looks like this:
Copy code
{
    "@gooddata/api-client-tiger": "^8.12.1",
    "@gooddata/sdk-backend-tiger": "^8.12.1",
    "@gooddata/sdk-ui": "^8.12.1",
    "@gooddata/sdk-ui-all": "^8.12.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
}
And these are an example of the errors I'm getting
j
Could I ask you to send us a minimal code snippet that’d be needed to reproduce this error? A self-contained React component with all the imports would probably be best.
m
Issue comes up even before I embed the react component, while trying to set up backend in the 
App.tsx
Copy code
import tigerFactory, { ContextDeferredAuthProvider, redirectToTigerAuthentication } from '@gooddata/sdk-backend-tiger';
...
const backend = tigerFactory().withAuthentication(new ContextDeferredAuthProvider(redirectToTigerAuthentication));
...
const App: FC = () => {
  const theme = createTheme();
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <StylesProvider>
... In that file, I get the errors as provided above. Is it enough or need to provide more data from my side?
j
Should be enough. I’ll see what I can find. Thanks.
m
Thank you very much @Jan Rehanek!
j
Out of curiosity, what’s your version of React and TS?
m
Copy code
"react": "^17.0.1",
"typescript": "^4.2.4"
j
Thanks!
🙌 1
Testing the same 
@material-ui
dependencies that you have hasn’t lead to the same error for me, so I don’t expect there’s any natural incompatibility. The 
StylesProvider
etc components work fine with 8.12.1 SDK Googling around a bit, I came up with a few StackOverflow entries and GitHub issue, e.g. https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component. Any chance this could help?
m
OK, difficult though because the errors appear just right after I do the import from 
import { BackendProvider, WorkspaceProvider } from '@gooddata/sdk-ui';
. When I remove the import, all issues seem to be fading out.
j
🤔
Will continue looking into it.
m
Thank you very much @Jan Rehanek. Please let me know if you need any further info from me. Open to huddle if that's an option too.
j
One strange thing: In the error, I see it referring to TS version 5, but you’ve listed 
"typescript": "^4.2.4"
. Any idea what could be the cause of that? Additionally, could you please make sure you have the correct @types/react?
m
These are the current @types versions
Copy code
"@types/d3": "^7.0.0",
    "@types/file-saver": "^2.0.5",
    "@types/jest": "^27.0.2",
    "@types/lodash": "^4.14.177",
    "@types/node": "^17.0.5",
    "@types/react": "^17.0.0",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^17.0.3",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
j
And which react-intl version are you using?
m
What do you mean react-intl @Jan Rehanek?
b
Hi Menelaos, react-intl is one of the dependency packages for GD react SDK
m
Oh, I probably missed that @Boris. Can you please point me to the docs where all the dependencies are listed?
b
It depends on which specific GD UI SDK libraries you are using. But you should be able to find it here: https://github.com/gooddata/gooddata-ui-sdk/tree/v8.12.1/libs - package.json file in each specific library
m
But these should be installed by the sdk, which is included in the package.json, right?
b
in theory yes, but there might be some issue with the version
m
So what's the correct way forward to resolve?
b
for now, we'd just like to know which version of react-intl you have 🙂
m
Thank you, my current version is 
react-intl@5.25.1
👍 1
b
Hi Menelaos, so far we haven't found anything obvious, but we are going to continue looking.
m
Thank you very much @Boris, I'll be waiting if anything comes up. Thank you!
Hey, do we have any updates here? Any further input needed from my side?
b
Hi Menelaos, not yet I am afraid, I'll dig into it later today
👀 1
it looks like this is caused by some dependencies of dependencies incompatibility, but it's hard to say which exactly, so it's a bit tedious task. I would suggest trying different versions of some packages. Would it be possible to try mui > 5 or are there too many breaking changes? It might also be worth trying to upgrade typescript. Also, we will soon release UI.SDK 9, which should support react 18 and have a bit different dependencies, so this might be resolved purely by the upgrade.
m
Thanks @Boris for the update. mui is definitely not doable right now, it would cause a great mess to do so. Also, when the releases of ui.sdk 9 is planned?
b
It’s planned for 27th of July
m
Oh, that's too late. Will have to figure sth out. Thanks for your help.
j
Hello again @Menelaos Kotoglou. Something else is pulling there these types that are causing your error. Here’s where we are: • Could you try to delete package.json lock (yarn. local if you use yarn, package-lock.json if you use npm) and delete node_modules directory of the project and try to install dependencies again. Possibly, you may have experimented with newer version of react and these dependencies remained in the lock/node modules because the broad dependencies defined in the react-intl allows them. • If it does not help, could you create a minimal reproducer project, zip it, and send it to us? Without that, we’re a bit in the dark.
🙌 1
m
Hey @Jan Rehanek, thanks for that. Just tried step one and right now it seems that there are only two issues as defined here. Any other thing I should experiment before sending you the project as described above?
j
I can’t think of anything. FYI, the minimal reproducer should contain only the bare necessary code for us to be able to recreate the issue on our end and tinker with it. Of course, obfuscate or remove anything sensitive. We’ll take a look at that and get back to you.
m
Hey @Jan Rehanek, just prepared it and sending you over DM in order to further look into it. Thank you very much in advance!
cc @Konstantinos Koroneos to the thread, an engineer colleague.
j
Thank you. We’re looking into it and I’ll update you as soon as I can.
🙌 2
The reproducer helped, thank you. Comment from our SDK engineer about the root cause: • Our gooddata SDK library uses 
react-intl
that has broad dependency on 
@types/react: 16 || 17 || 18
and even when package.json explicitly mentions we want to use version 
^17.0.0
, it is used for some dependencies but for react-intl, version 18 is used instead as it is the newest matching the broad rule. Adding 
"@types/react": "17.0.61"
to the 
"resolution"
object of 
package.json
and the problem in 
App.tsx
goes away. Highlighted in the picture below:
👀 1
🙌 2
Please let me know if this helped.
m
Thank you @Jan Rehanek. Seems to be resolving the initial issue, yes. Still troubleshooting with some stuff that have come up, will let you know if anything else is needed in the process. Again, thank you very much for your help in this. It's much appreciated!
j
Good to hear! If you have more questions or things to troubleshoot, you can always do so in one of the relevant channels. #gooddata-cn or #gooddata-ui would be most appropriate for you I suppose.
🙌 1
Open in Slack
PreviousNext
Powered by