'how to use a CDN inside a React component
I'm trying to use a library built on D3, called Greuler, in order to dynamically render graphs. The npm package for it seems to be broken. When I switched out for the Greuler CDN, the test graph inside my index.html finally worked.
However, I'm working on a React app, and I want the graph to be rendered from a React component. Here the problem comes up: the react component doesn't use the Greuler CDN scripts that are in my index.html, and I've tried multiple ways of running the scripts inside my component, but nothing seems to work.
The two main errors are:
error 'greuler' is not defined (in my component)
Uncaught TypeError: Cannot read property 'getAttribute' of null (in the D3 code)
My working index.html, with hard-coded graph looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigating Spinoza</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
</head>
<body>
<div id="root"></div>
<div class="row" id="demo">
<script>
var instance = greuler({
target: '#demo',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
</script>
</div>
</body>
</html>
My last desperate attempt at the render function in the component looks like:
render() {
return (
<div class="row" id="demo">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
{
greuler({
target: '#demo',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
}
</div>
</div>
);
}
}
Solution 1:[1]
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigating Spinoza</title>
</head>
<body>
<div id="root"></div>
<div class="row" id="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js">
</script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js">
</script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
<script>
import React from 'react'
import { render } from 'react-dom'
var Instance = greuler({
target: '#demo',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
render(
<Instance />,
document.getElementById('root')
)
</script>
</body>
</html>
Solution 2:[2]
Try installing the module with npm:
npm install greuler
See here: https://www.npmjs.com/package/greuler
Then use in your component:
var greuler = require('greuler')
Solution 3:[3]
You need to use a module bundler like webpack or browserify and then import the library.
npm install greuler
var greuler = require('greuler')
Solution 4:[4]
I got an issue like this, but the old answers cannot run. So I create this here.
Url
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/WebCola/cola.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/greuler.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
JS
class Component extends React.Component {
componentDidMount() {
greuler({
target: '#chart',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
}
render() {
return (
<div id="chart"></div>
);
}
}
ReactDOM.render(<Component />, document.querySelector('#root'));
console.log(React)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Toby |
| Solution 3 | |
| Solution 4 |