SyntaxError in Internet Explorer 11

[jbanulso]

🐛 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]

I am also facing the same issue in IE11 and thanks for providing the temporary solution @jbanulso.

[hshoff]

Hi @jbanulso, thanks for opening this issue.

Yes, that seems right. @visx/scale bumped d3-scale dep to 3 here: 047140d#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.

[sarathps93]

@hshoff Not sure if this can be clubbed with this issue. Anyways just putting it out. I am also facing IE11 issues when using TooltipInPortal from @visx/tooltip -> useTooltipInPortal hook. Based on an high level observation it seems like it is because of the non-transpiled code from react-use-measure (I could be wrong though).

I am getting an error of Expected identifier.. along with the below code

[dimitrisnl]

@sarathps93 What approach did you take to solve this?

[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

[0x80]

I had the same problem as @sarathps93 as part of a Next.js application.

Adding @visx/tooltip to the list of the next-transpile-modules plugin solved the react-use-measure error, only then my chart rendering was still messed up. I suspect the layout got distorted because elements were getting squished by the TooltipInPortal component, but didn't look into it further.

When I switched to using TooltipInPortal everything was ok.

[hshoff]

Closing for now as there are solutions/workarounds detailed in this thread and IE11 was retired and out of support as of June 15, 2022. https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/