Using Viz as a standalone React component doesn't work out of the box

Description

Using Kedro-Viz as a standalone React component doesn’t work out of the box.

Context

I’m trying to use Viz as a standalone component in my Create React App project. I’m getting some errors, and when those are remedied, I don’t see the anything in the browser.

Steps to Reproduce

1. Create a new project with Create React App: npx create-react-app kedro-viz-standalone-component
2. cd into the project and then install the the Viz dependency: npm install @quantumblack/kedro-viz --save
3. Add a file with some dummy Kedro data (data example)
4. Update App.js to include the Viz component and the data:

import "./App.css";
import KedroViz from "@quantumblack/kedro-viz";
import { demo } from "./demo";

function App() {
  return (
    <div className="App">
      <KedroViz data={demo} />
    </div>
  );
}

export default App;

1. Run the app with npm start.
2. Observe the compile errors and subsequently the blank webpage.

Expected Result

The app should run without error and I should see Kedro Viz running locally.

Actual Result

I received some dependency errors:

And when I fixed those and ran the app again, nothing showed up, thought the DOM elements exist:

Your Environment

Include as many relevant details as possible about the environment you experienced the bug in:

• Web browser system and version: Google Chrome Version 98.0.4758.80 (Official Build) (x86_64)
• Operating system and version: MacOS 11.6.2 (20G314)
• NodeJS version used (if relevant): 14.17.0
• Kedro version used (if relevant): 4.3.1

Checklist

• Include labels so that we can categorise your issue

[studioswong]

@rashidakanchwala just saw that you had picked up this issue - I had started looking into this alongside issue #758 as this needs to be fixed in order to ship #758 , and to avoid duplicate efforts I can assign this to myself, if that’s ok with you?

[tynandebold]

Closed by #758