Using Viz as a standalone React component doesn't work out of the box
See original GitHub issueDescription
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
- Create a new project with Create React App:
npx create-react-app kedro-viz-standalone-component
cd
into the project and then install the the Viz dependency:npm install @quantumblack/kedro-viz --save
- Add a file with some dummy Kedro data (data example)
- 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;
- Run the app with
npm start
. - 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
Integrating with Other Libraries - React
It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused...
Read more >Code-Splitting - React
Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included...
Read more >Thinking in React
Step 1: Break The UI Into A Component Hierarchy The first thing you'll want to do is to draw boxes around every component...
Read more >Add React to a Website
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your...
Read more >React Without JSX
Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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?
Closed by #758