Hi Team, I'm facing an issue while integrating a GoodData chart as a widget. Below is the code I'm currently using:

import React from "react";
import { InsightView } from "@gooddata/sdk-ui-ext";
import { backend } from "./gooddataBackend";
import { ErrorComponent, LoadingComponent } from "@gooddata/sdk-ui";

function Widget() {
  const WORKSPACE_ID = '16dc08728a664c6f111a219ffa86058d';
  const WIDGET_ID = '08a304f9-5269-4fb6-8c36-ea1eef6c0aa4';

  console.log("Backend:", backend);
  console.log("Workspace:", WORKSPACE_ID);
  console.log("Insight:", WIDGET_ID);

  return (
    <div style={{ padding: 40 }}>
      <h2>GoodData Chart Widget</h2>
      <InsightView
        insight={WIDGET_ID}
        backend={backend}
        workspace={WORKSPACE_ID}
        LoadingComponent={LoadingComponent}
        ErrorComponent={ErrorComponent}
      />
    </div>
  );
}

export default Widget;

Below is issue am facing after integration,

CorrelationContext.tsx:94 
 Uncaught TypeError: effectiveBackend.withCorrelation is not a function
    at CorrelationContext.tsx:94:1
    at useBackendWithCorrelation (CorrelationContext.tsx:90:1)
    at useBackendWithVisualizationCorrelation (InsightView.tsx:289:1)
    at InsightView (InsightView.tsx:268:1)
Widget.js:10 Backend: 
BackendWithDecoratedServices {capabilities: {…}, config: {…}, decorated: TigerBackend, factories: {…}}
Widget.js:11 Workspace: 16dc08728a664c6f991a219ffa86058d
Widget.js:12 Insight: 08a304f9-3239-4fb6-8c36-ea1eef6c0aa4
CorrelationContext.tsx:94 
 Uncaught TypeError: effectiveBackend.withCorrelation is not a function
    at CorrelationContext.tsx:94:1
    at useBackendWithCorrelation (CorrelationContext.tsx:90:1)
    at useBackendWithVisualizationCorrelation (InsightView.tsx:289:1)
    at InsightView (InsightView.tsx:268:1)
react-dom.development.js:18687 
 The above error occurred in the <InsightView> component:

    at InsightView (<http://localhost:3000/static/js/bundle.js:977268:19>)
    at div
    at Widget
    at RenderedRoute (<http://localhost:3000/static/js/bundle.js:629264:5>)
    at Routes (<http://localhost:3000/static/js/bundle.js:629754:5>)
    at AppRoutes (<http://localhost:3000/static/js/bundle.js:264:56>)
    at Router (<http://localhost:3000/static/js/bundle.js:629692:15>)
    at BrowserRouter (<http://localhost:3000/static/js/bundle.js:627881:5>)
    at div
    at AppProvider (<http://localhost:3000/static/js/bundle.js:156:5>)
    at App (<http://localhost:3000/static/js/bundle.js:42:78>)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://reactjs.org/link/error-boundaries> to learn more about error boundaries.
CorrelationContext.tsx:94 
 Uncaught TypeError: effectiveBackend.withCorrelation is not a function
    at CorrelationContext.tsx:94:1
    at mountMemo (react-dom.development.js:17225:1)
    at Object.useMemo (react-dom.development.js:17670:1)
    at useMemo (react.development.js:1650:1)
    at useBackendWithCorrelation (CorrelationContext.tsx:90:1)
    at useBackendWithVisualizationCorrelation (InsightView.tsx:289:1)
    at InsightView (InsightView.tsx:268:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)

Could you please suggest what might be going wrong here?

Hello Sunil, Please send us your package.json and ideally provide some minimal reproducer i.e. in form of codesandbox (some templates here) or something similar. This would greatly help us move forward. According to our documentation, your code should look something like: https://www.gooddata.com/docs/gooddata-ui/latest/learn/visualize_data/insightview/ Can you please help us understand what you are trying to achieve.

Hello Sunil, are you still facing issues? If you need any further assistance could you please provide everything requested above?

Hi @Joseph Heun I need a generic component where I am going to just pass Id of that component (it will be any chart like treemap, barchart etc). So can you please help me how I can achieve that please?

Hi Sunil, it looks like the InsightView component is exactly what you're looking for. This component allows you to render any insight or visualization by simply passing the corresponding ID. From your initial message, it seems that’s what you were trying to do. However, it’s still unclear why it's not working, as we’re currently missing some of the necessary information to troubleshoot the issue effectively. Could you tell us a bit more about your use case? Are you trying to implement something different than the InsightView component? Also, when you mention a "widget," are you referring to a visualization? If there’s anything we might be missing, please feel free to clarify. For further assistance, you can reply to this thread with the requested details or send them via DM.