CODEWITHSUNDEEP
javascriptreactjsgoogle-chromed3.js
JoeBe
JoeBe

Reputation: 1290

Why is d3 undefined in Chrome console in my React app?

I am importing the d3.js library in my React app like this:

import * as d3 from "d3";

I am creating a basic world map, which is also displayed correctly in the browser. However, when I try to do something like this in Chrome console:

d3.select("path")

I am getting an error:

Uncaught ReferenceError: d3 is not defined

I guess it has something to do how React works, and being a novice in React right now I don't know what i am missing here right now. Anybody can help?

Upvotes: 0

Views: 796

Answers (1)

Andres
Andres

Reputation: 1012

Because webpack (or any other bunder) holds it in module scope. To prevent collisions between modules, bundlers wrap those with functions. You can consider all imports, as local function variables:

function yourModule(require) {
  const d3 = require('d3');

  // you can use d3 here within your module
}

you're not able to use it here, somewhere outside

Upvotes: 1

Related Questions