javascriptdata / danfojs

Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.
https://danfo.jsdata.org/
MIT License
4.79k stars 209 forks source link

Unable to use with react #647

Closed ikouchiha47 closed 1 month ago

ikouchiha47 commented 1 month ago

Describe the bug A clear and concise description of what the bug is.

I am following the steps here, https://danfo.jsdata.org/examples/using-danfojs-in-react , But as soon as I import danfo and use dfd.DataFrame I get the below error.

Fraction.js:20 
 Uncaught 
TypeError: Cannot set properties of undefined (setting 'type')
    at createFractionClass.isClass (Fraction.js:20:1)
    at assertAndCreate (factory.js:49:1)
    at ./node_modules/mathjs/lib/cjs/entry/pureFunctionsAny.generated.js (pureFunctionsAny.generated.js:100:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/mathjs/lib/cjs/entry/mainAny.js (mainAny.js:53:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)

  | options.factory | @ | react refresh:6
-- | -- | -- | --
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | ./src/App.js | @ | bundle.js:16
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | fn | @ | hot module replacement:61
  | ./src/index.js | @ | App.js:29
  | options.factory | @ | react refresh:6
  | __webpack_require__ | @ | bootstrap:22
  | (anonymous) | @ | startup:7
  | (anonymous) | @ | startup:7

To Reproduce Steps to reproduce the behavior:

$> npx create-react-app sample-app
$> npm install danfojs --save
$> npm list danfojs mathjs fraction.js                                                                                                                                                       (130) (*master+1) 03:27:03 
sample-app@0.1.0 /home/iko/dev/projects/sample-app
├─┬ danfojs@1.1.2
│ └─┬ mathjs@9.4.4
│   └── fraction.js@4.3.7
└─┬ react-scripts@5.0.1
  └─┬ postcss-preset-env@7.8.3
    └─┬ autoprefixer@10.4.20
      └── fraction.js@4.3.7 deduped
import * as dfd from "danfojs";

function App() {

  const df = new dfd.DataFrame(
    { pig: [20, 18, 489, 675, 1776], horse: [4, 25, 281, 600, 1900] },
    { index: [1990, 1997, 2003, 2009, 2014] }
  );
  df.head().print()

  return (
    <div className="App">
      <header className="App-header">
        <a
          className="App-link"
          href="https://danfo.jsdata.org/getting-started"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Danfojs
        </a>
      </header>
    </div>
  );
}

export default App;

Expected behavior Show the rendered table in web console instead of the error.

Desktop (please complete the following information):

ikouchiha47 commented 1 month ago

I installed mathjs separately, like npm install mathjs --save and that fixed the issue.