How to bundle for legacy browsers?

Since the 1.11.0 release, the d3 dependency is updated to be as separated used d3 modules only. (Ref. #1054)

NOTE:
To improve for those can't apply solutions described in this document, downgraded the dependency module d3-scale to v2.x since v1.12.3, where this issue comes. (Ref. d3-scale v3 release note)

From this change, when import billboard.js, the dependent d3 modules will be concatenated & bundled in your build from the node_modules.

If use webpack as bundler, generally node_modules is pointed to be excluded from the loader boundary, where this issue comes. This issue will not have effect if you include directly via <script> tag. Only is happening when import as ESM and is targeting for old IEs.

Ref. Billboard.js 1.11.0 doesn't support IE 11

So, there're two possible solutions on this.

1) Make 'd3-*' modules to be transpiled

When your bundler(ex. webpack) configuration set is excluding node_modules, update to include d3- modules giving below configuration.

• https://webpack.js.org/configuration/module/#condition

// webpack.config.js
module: {
    rules: [
        {
            test: /(\.js)$/,
            exclude: {
                test: /node_modules/,
                not: [/(d3\-.*)$/]
            },
            use: {
                loader: "babel-loader"
            },
        },
        ...
    ],
}

Pros

You can apply your own optimized configuration for dependent modules.

Cons

You might need to handle all of possible legacy related polyfills and transformation needed.

2) Use transpiled d3 packaged build

If you don't want to handle all possible configuration for legacy browsers, just use packaged build.

import {bb} from "billboard.js/dist/billboard.pkgd";

bb.generate(...);

In this case, you need to add on your bundler configuration to not concatenate d3 modules, because packaged build already contains them.

// webpack.config.
externals: /^(d3\-.*)$/i,

• https://webpack.js.org/configuration/externals/

Pros

Get rid all the headache configuration for the legacy environment.

Cons

Might possibly make bigger the build size, because of polyfills.