Babel/d3-array incompatibility issue in new Windows installs

[kayavila]

There seems to be an issue with babel/d3-array in fresh Windows installs. After creating an idyll article (and probably other types), trying to run idyll results in an unhandled error. This not an issue with idyll itself per se but may be impacting idyll users.

To Reproduce
Steps to reproduce the behavior:

1. Download and install node.js from https://nodejs.org/en/download/
2. Open a Node.js command prompt and update npm to the latest (8.6.0) - npm install -g npm@latest
3. npm install -g idyll
4. idyll create (use the defaults)
5. cd my-idyll-post
6. idyll

An error is thrown -

Building Idyll project with output directory: build

[BABEL] Note: The code generator has deoptimised the styling of "C:/Users/Kay/idyll/idyll-helloworld/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds the max of "500KB".
node:events:504
      throw er; // Unhandled 'error' event
      ^

SyntaxError: C:/Users/Kay/idyll/idyll-helloworld/node_modules/d3-array/dist/d3-array.js: Only '=' operator can be used for specifying default value. (139:15)
  137 |   var sum = 0, index = 0;
  138 |   return Float64Array.from(values, valueof === undefined
> 139 |     ? v => (sum += +v || 0)
      |                ^
  140 |     : v => (sum += +valueof(v, index++, values) || 0));
  141 | }
  142 |

Environment

• OS: Microsoft Windows 10
• [email protected]
• [email protected], [email protected]

I had newly reformatted Windows 10 just a week or so ago, so it's a pretty clean environment. Idyll is being used for a class I'm attending, and about five of us in the class (all on Windows 10) ran into this same issue.

Installing the same in a new Ubuntu virtual machine does not throw an error. d3-array and babel (and idyll) versions were the same.

Additional context
As discussed in babel/babel#11038, updating cumsum in d3-array.js to use the function below instead is a workaround -

function cumsum(values, valueof) {
  var sum = 0,
    index = 0
  return Float64Array.from(
    values,
    valueof === undefined
      ? function (v) {
          return (sum += +v || 0)
        }
      : function (v) {
          return (sum += +valueof(v, index++, values) || 0)
        }
  )
}

Relevant links:

• typescript preset: incompatible with += operator inside arrow functions, nested in ternary babel/babel#11038
• d3.cumsum fails to transpile with babel6 + preset-react d3/d3-array#147

[mathisonian]

Thanks for flagging this @kayavila. Can you confirm which version of node you are using, and that you are doing this directly from the windows shell (i.e. not using the windows linux subsystem)?

We have an open PR which should be merged in the next week that I believe will fix this, #764, however it needs a bit of additional testing before we deploy it. If there is a quick patch I would be happy to merge and release something.

[kayavila]

That's great that a fix is already in the works. I'd love to help with a patch sooner but unfortunately am a novice in this arena.

Yes, this is in the Windows shell, not subsystem, and it's node version 16.14.2.

[mathisonian]

Okay, thanks for that info. I can merge that PR and cut an alpha release on Friday which should solve your issue as it upgrades to support the latest versions of D3 + Babel.

I'll post upgrade instructions here once that's done.

[mathisonian]

Hi @kayavila,

A new alpha version has been released which should hopefully fix this issue. To use it, you need to install the latest idyll version, and use it to create a new article:

• npm install -g idyll@[email protected]
• idyll create
• cd <post-name>
• idyll

Please let me know if you still run into issues.

[kayavila]

Working much better! Thank you for the quick fix.