Search code examples
javascripthtmlcorsnode-modulesdirectory-structure

Importing a JS library installed as a Node module

I want to set up a project using the Britecharts library. Having installed Britecharts with npm install --save britecharts d3-selection I'm trying to verify that the imports are working by displaying a basic chart in the browser.

My index.html:

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <!-- TESTME -->
  <link type="text/css" rel="stylesheet" href="node_modules/britecharts/dist/css/britecharts.min.css">
  <script type="module" src="chart.js"></script>
</head>

<body>

  <div class="bar-container"></div>

</body>

</html>

My chart.js:

// For ES modules
import bar from 'britecharts/dist/umd/bar.min';

// Instantiate bar chart and container
const barChart = britecharts.bar();
const container = d3.select('.bar-container');

// Create Dataset with proper shape
const barData = [
    { name: 'Luminous', value: 2 },
    { name: 'Glittering', value: 5 },
    { name: 'Intense', value: 4 },
    { name: 'Radiant', value: 3 }
];

// Configure chart
barChart
    .margin({left: 100})
    .isHorizontal(true)
    .height(400)
    .width(600);

container.datum(barData).call(barChart);

My folder stucture:

├── britecharts
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
├── chart.js
└── index.html

The dev console gives me this error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///Users/vahagnhay/Desktop/britecharts-test/chart.js. (Reason: CORS request not http).

I'm a newbie to JS projects — am I even doing this right?

Solution

  • Here's how I solved this. Forget all about Node imports and doing it "the JavaScript way" (I don't know why JavaScript people always feel they have to re-invent working conventions).

    Instead, do it the Web Standards way. Unpack the Britecharts library files plus dependencies, put them in a folder local to your app, then import them in your HTML:

      <!-- chart -->
  <div class="bar-container"></div>

  <script src="/js/britecharts/node_modules/britecharts/dist/umd/bar.min.js"></script>
  <script src="/js/britecharts/node_modules/d3/dist/d3.min.js"></script>

  <script src="/js/chart.js"></script>
  <!-- chart -->

    Bingo!