saehm / DruidJS

A JavaScript Library for Dimensionality Reduction
111 stars 9 forks source link

Experimental JavaScript features cause problems with babel or create-react-app #22

Closed fheyen closed 3 years ago

fheyen commented 3 years ago

When trying to use DruidJS in a React application that uses (un-ejected) create-react-app, I came across the following error when importing druid using either

import * as druid from '@saehrimnir/druidjs'; or import * as druid from '@saehrimnir/druidjs/dist/druid.js'; (same with .min)

Failed to compile.

./node_modules/@saehrimnir/druidjs/dist/druid.js
SyntaxError: <censored>\node_modules\@saehrimnir\druidjs\dist\druid.js: Support for the experimental syntax 'classProperties' isn't currently enabled (355:23):

  353 |      * Makes a {@link Matrix} object an iterable object.
  354 |      */
> 355 |     [Symbol.iterator] = this.iterate_rows;
      |                       ^
  356 | 
  357 |     /**
  358 |      * Sets the entries of {@link row}th row from the Matrix to the entries from {@link values}.

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

I found a workaround that allows customizing the babel config without ejecting: https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/

This works for me, but I would prefer druid to 'just work' also with React, since others might not be able to figure out a solution and might therefore abandon the library. Maybe there is a way to transpile the code, such that experimental features are avoided.

fheyen commented 3 years ago

Correction, the workaround does not work.

I also tried babel-polyfill (inspired by this stackoverflow post), and the newer way of polyfilling, but there's still the same error...

So I assume that it is just not possible to use druid in a React app currently.