1

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?

user3217883
  • 1,216
  • 4
  • 38
  • 65

1 Answers1

0

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.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Ah, thanks for the distinction. I took your advice and that seems to have eliminated the d3 errors. But now I'm seeing this error: "Line 3:123: 'define' is not defined no-undef Line 66:47: Expected an assignment or function call and instead saw an expression no-unused-expressions". Lines 2-4 show: (function (t, n) { "object" == typeof exports && "undefined" != typeof module ? n(exports) : "function" == typeof define && define.amd ? define(["exports"], n) : n(t.d3 = t.d3 || {}) })(this, function (t) { – user3217883 Mar 20 '21 at 02:09
  • That is in src\components\CandlestickChart\techan.js – user3217883 Mar 20 '21 at 02:10
  • That's a linter warning, not a JavaScript error. But that's the minified version, and it's not *your* source code anyway, it's the library code, which there shouldn't be any need to modify. – CertainPerformance Mar 20 '21 at 02:13
  • Did you copy pieces of d3's source code into your own src folder? If so, don't do that - instead, *import* d3 with `import * as d3 from "d3"` only. – CertainPerformance Mar 20 '21 at 02:14
  • I had done that but now I've deleted it and did it your way. The last error I reported causes "Failed to compile" so it seems to be more than just a warning. This gets to a broader question of how to import 3rd party javascript libraries that don't have a convenient npm install available. – user3217883 Mar 20 '21 at 02:18
  • You can keep linter warnings from breaking the build process with a few approaches: https://stackoverflow.com/q/64518226 https://stackoverflow.com/q/48714225 But it's a bit ugly. Good thing the vast majority of libraries are installable via NPM nowadays. – CertainPerformance Mar 20 '21 at 02:22
  • You were right again. I tried "npm install techan" and to my surprise it seemed to work. I changed the code like you showed me and now I'm getting a different error. "TypeError: Cannot read property 'min' of undefined > 1422 | heikinashi: require('./heikinashi')(indicatorMixin, accessor.ohlc, d3.min, d3.max),". But that appears to be a version issue or something in the library itself. I'll accept your answer and try to figure that one out. Thanks a lot! – user3217883 Mar 20 '21 at 02:35