How to integrate javascript libraries into react?

Question

I have two javascript libraries that I need to integrate into my React app. First I tried this:

import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"

That produced error:

./src/components/CandlestickChart/CandlestickChart.jsx Module not found: Can't resolve 'http://techanjs.org/techan.min.js' in 'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'

So I went to http://teckanjs.org/techan.min.js, copied the code, ran it through a beautifier, and saved it to techan.js, located in the same folder as CandlestickChart.jsx. I changed import to

import techan from "./techan.js"

Then I got similar error:

./src/components/CandlestickChart/CandlestickChart.jsx Module not found: Can't resolve 'http://techanjs.org/techan.min.js' in 'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'

So I did the same thing as with the other one and changed the import to:

import d3 from "./d3.v4.js"

Then I got error:

./src/components/CandlestickChart/d3.v4.js Module not found: Can't resolve './requirejs' in 'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'

So I found requirejs online and did the same thing as the others and added an import to d3.v4.js like this:

import requirejs from "./requirejs";

But still getting the same error. What's the trick to this?

Answer 1

Install it as a local package. Run the following:

npm install d3

Then you'll be able to import it in your JavaScript:

import * as d3 from "d3";

Note the "d3", not the "./d3" - the lack of the ./ indicates that you want to install from a module package, not from a file in the same directory.