Billboard.js 1.11.0 doesn't support IE 11

[imbyungjun]

Description

Billboard.js v1.11.0 doesn't work in IE.
I think that it's because It depends on d3-array 2.4.0 that doesn't support IE anymore. d3/d3-array#87

billboard.js/package.json

Line 110 in fbb8946

"d3-array": "^2.4.0",

[netil]

Hi @imbyungjun, I ran the build and seems working fine.
The d3-array used in Stanford Diagram plugin only and from the base library it was removed the use of it(#710).

Could you provide detailed reproducible case?

[netil]

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

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

If you 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 as <script> tag. Only is happening when you import as ESM and is targeting for old IEs.

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.

[imbyungjun]

Appreciate for your detailed guide! It perfectly works for me.

I fixed it by transpiling d3-* modules.

To resolve d3-scale module's compatibility issue, "@babel/plugin-transform-for-of" plugin was needed

[jm-chong]

If you are using babel7 and /node_modues/ still not transplie to es5, consider this solution.

• How to exclude node_modules but one webpack/webpack#2031 (comment)
• https://babeljs.io/docs/en/configuration#whats-your-use-case

[netil]

FYI @jm-chong, @imbyungjun
Downgraded d3-scale version to get rid the need of transpile the code.

• https://github.com/naver/billboard.js/releases/tag/1.12.3