question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: Screen Shot 2022-02-10 at 10 49 25

And when I fixed those and ran the app again, nothing showed up, thought the DOM elements exist: Screen Shot 2022-02-10 at 12 16 31

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:closed
  • Created 2 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
studioswongcommented, Mar 7, 2022

@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?

0reactions
tynandeboldcommented, Apr 20, 2022

Closed by #758

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found