CODEWITHSUNDEEP
javascriptnode.jsd3.jswebpack
Tom
Tom

Reputation: 123

Importing / Compiling d3 v4 with Webpack

I've recently incorporated PostCSS, Gulp and Webpack into my workflow, however the learning curve is pretty steep (Webpack in particular!) and I'm having issues getting it to compile d3. I've installed d3 with npm install d3 --save and have tried importing it as:

var d3 = require("d3");

which didn't work. I tried installing a loader, adding

     new webpack.ProvidePlugin({
        d3: "d3"
    }),

to my webpack.config file and importing as 

var d3 = require("d3!");

which didn't work either. I've tried the stuff here and here (last answer re the loader) as well.

I get the following error from my browser:

Uncaught ReferenceError: d3 is not defined

And gulp gives me the following error in the command line:

..../node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

My code repo is here.

Thanks in advance!

Upvotes: 2

Views: 2001

Answers (2)

MFave
MFave

Reputation: 1074

Just thought I would point out that the update of d3 from v3 to v4 was quite disruptive. I had a similar problem as the one you mentioned until I realized that the d3 code has changed in almost every circumstance.

I was able to import d3 (installed as a node module) normally with webpack by using 

import * as d3 from "d3";

Afterwards, errors made it look as tho d3 was not being imported, however it was because I was using d3 v3 style code.

for example:

d3.layout.pie()

is now simply:

d3.pie()

After refactoring, everything worked as expected. I'm not sure if this is the cause of your problems, but it's something to be mindful of.

Upvotes: 3

mikeapr4
mikeapr4

Reputation: 2856

The reason the loader didn't work was because in Webpack 2 the full name is necessary:

var d3 = require('d3-webpack-loader!');

However as this loader isn't Webpack 2 compatible (at this time), the normal d3 package can be used. However in a Node env (remember Gulp/Webpack are run in Node), the build/d3.node.js version is imported by default, this isn't what you want here, so the following webpack alias will solve the problem:

resolve: {
    alias: {
        d3: 'd3/build/d3.js'
    }
},

Add this to your webpack.config.js. With this, you can continue to use:

var d3 = require('d3');

Upvotes: 2

Related Questions