Expose global variable when using Browserify

Question

I use Browserify and would like to use D3.js along with a radar chart component.

import 'd3';
import 'radar-chart-d3';

The radar chart component returns the error Uncaught ReferenceError: d3 is not defined .

I tried using the insertGlobalVars option of browserify:

browserify: {
    bundleName: 'main.js',
    prodSourcemap: false,
    insertGlobalVars: {
      d3: function(file, dir) {
        return 'require("d3")';
      }
    }
  }

However, this does not change anything about the situation. I know I can just add require('d3') at the top pf the radar chart .js file but I'd like to avoid that.

What other way is there to expose the d3 variable to a global scope so that other files can use d3 .

Answer 1

Put this in in package.json :

"eslintConfig": {
  "globals": {
    "d3": true
  }
}