0

I'm fairly new to working with JavaScript-heavy projects like this, so I'm sure there are a lot of things I'm not doing right.

I have a Node project whose file structure looks roughly like

project
|- index.js
|- hello.html
|- package.json
|- public
   |- views
      |- chart.js

I run the site on my local server with node index.js. I have express installed, and in index.js I'm using it to route the request '/' to the file hello.html. Inside my html file I'm importing a js script from chart.js like

<head>
  <script type="text/javascript" src="/views/chart.js"></script>
</head>

If I write code in chart.js (like console logging) then it works as expected, so I know my files are connected like I want. My problem is that I have a Node module installed (D3) that I'm trying to use in chart.js to make a bar chart, but I haven't gotten it to work. If I put const d3 = require('d3') in my index.js file and try to use d3 in chart.js file I get an Uncaught ReferenceError because d3 is not found; on the other hand if I put const d3 = require('d3') directly in chart.js then require is not found (based on some searches I learned this is because require is a Node thing and not a Browser thing).

Can someone please tell me a simple way of using an external library (like D3) in an imported javascript file? Do I need to figure out RequireJS (which is the official answer to this related question but seems overly complicated to my beginner eyes) or can I re-structure my project/use a different approach to make it work somehow?

William
  • 296
  • 4
  • 14
  • 2
    Have you tried following the instructions at the top of the [D3 homepage](https://d3js.org/)? – Quentin Apr 10 '20 at 17:17
  • 1
    node modules only work when you're in a node environment eg the server, when you've got a project structure such as yours the site itself is in the browser/ window environment and not the node environment where you're modules live – b.stevens.photo Apr 10 '20 at 17:23
  • 1
    Easiest solution would be to include d3's script tag in your html, `` – b.stevens.photo Apr 10 '20 at 17:24
  • That should make d3 available in the "global" context so any js file on the front end should have access to d3 without the need of an import – b.stevens.photo Apr 10 '20 at 17:26
  • if I put the line `` above my `chart.js` script then I can successfully use the variable `d3` in my script, but I still haven't succeeded in importing a local copy of the library in my project folder (whether it's in the node_modules folder or otherwise). Is there a way to do that without something like RequireJS? – William Apr 10 '20 at 17:28
  • @William — Do it the same way you "imported" `chart.js`. – Quentin Apr 10 '20 at 17:29
  • Front end frameworks such as React allow for imports of node modules because it creates a node environment which is then attached to the browser, so with React and other front end frameworks you're actually working inside of its own node environment which in a sense brings along the modules you've installed and not just the browsers environment – b.stevens.photo Apr 10 '20 at 17:29
  • 1
    @William I don't believe there's a way to do what you're after without using another framework such as RequireJS – b.stevens.photo Apr 10 '20 at 17:32
  • 1
    @Quentin I "imported" my `chart.js` file by putting it in the `public` folder, which is made available with express' `use` function. I feel like i don't want to put all the libraries I want to use in my public folder just to be able to import them. In light of @bryanstevens314's comments it looks like my two options are either to import the js file from a public space or use some import framework. Thank you both for your advice. – William Apr 10 '20 at 17:40
  • 1
    @William — The browser has to be able to get to the library in order to import it. If it isn't public, it can't. "some import framework" is just going to bundle the JS up and put it in a public location. – Quentin Apr 10 '20 at 17:42
  • 1
    @William You need to put your local copy of the library somewhere in the `public` folder, and then load the file from the path that it is served on. There's really no other solution. Any framework for bundling dependencies etc will just do the same, it just makes managing them easier. – Bergi Apr 10 '20 at 18:47

0 Answers0