SyntaxError in Internet Explorer 11

🐛 Bug Report

Using @visx/scale in Internet Explorer throws a SyntaxError due to the use of non-transpiled ES6 syntax in the some of its D3 dependencies (i.e. d3-scale and d3-array). It is possible that this affects other packages in the @visx monorepo.

EDIT: Please note this was not a problem with the old @vx/scale.

To Reproduce

Use the package in a IE11 context.

Expected behavior

I know there is debate on whether dependencies should be shipped already transpiled or not, but in general package maintainers ship different versions to accommodate different build targets.

Temporary solution

For those facing the same issue, I modified my Webpack config and made babel-loader “un-ignore” the affected code like this. Although not ideal, it does the trick:

{
  test: /\.js$/,
  use: 'babel-loader',
  exclude: /node_modules\/(?!d3-)/
}

[sarathps93]

The solution @jbanulso suggested worked for me. And in the above case regarding react-use-measure I used TooltipWithBounds component instead of TooltipInPortal. It worked in ie11 without any issues

[hshoff]

Hi @jbanulso, thanks for opening this issue.

Yes, that seems right. @visx/scale bumped d3-scale dep to 3 here: https://github.com/airbnb/visx/commit/047140d2513975402df8dc046bb7b2a07d4904af#diff-217f22c28a2d867f392b420b3761151251a20535698ae9f218b844bb332e0e29R33 and d3-scale dropped IE11 support here: https://github.com/d3/d3-scale/releases/tag/v3.0.0

One idea would be to move d3-scale and @types/d3-scale to be peerDeps and then folks could choose to use d3-scale@2 or d3-scale@3. But not sure how or if that would work with the current visx/scale implementation. We might be tied to v3.

Visx will not be shipping with transpiled node_modules. This is something folks can opt into as seen in the temp solution. We should add a note to docs/readme for visx/scale including the workaround for IE11 support. Happy to review a PR that includes this.

cc @kristw and @williaster for additional thoughts and insights.