D3.js and Phoenix

Questions & Help Questions
, ,
6

Hi, welcome to the forum!

import * as d3 from 'd3';

should work as mentioned above, you can also add it to the Webpack dependencies by creating a new entry point:

entry: {
  app: ['./js/app.js', './css/app.css'],
  vendor: ['d3'],
},

or using a more complex configuration, so Webpack takes care of splitting your vendor dependencies:

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
    },
  },
},

I didn’t test it with D3, but should work. Have in mind that D3 is a heavy dependency, so splitting your JavaScript files in smaller chunks should help to build a better experience for your users.