Attempted import error, failed to compile react app

Question

I am getting the following error and would love it if someone could point me in the right direction :) I've tried different ways but nothing works.

Failed to compile ./src/App.jsx Attempted import error: 'eval' is not exported from 'mathjs' (imported as 'math').

 import React, { Component } from 'react'; import './App.css'; import { Button } from './components/Button'; import { Input } from './components/Input'; import { ClearButton } from './components/ClearButton'; import * as math from 'mathjs'; class App extends Component { constructor(props) { super(props); this.state = { input: "" }; } addToInput = val => { this.setState({input: this.state.input + val}); } handleEqual = () => { this.setState({input: math.eval(this.state.input)}); } render() { return ( <div className="app"> <div className="calc-wrapper"> <Input input={this.state.input}></Input> <div className="row"> <Button handleClick={this.addToInput}>7</Button> <Button handleClick={this.addToInput}>8</Button> <Button handleClick={this.addToInput}>9</Button> <Button handleClick={this.addToInput}>/</Button> </div> <div className="row"> <Button handleClick={this.addToInput}>4</Button> <Button handleClick={this.addToInput}>5</Button> <Button handleClick={this.addToInput}>6</Button> <Button handleClick={this.addToInput}>X</Button> </div> <div className="row"> <Button handleClick={this.addToInput}>1</Button> <Button handleClick={this.addToInput}>2</Button> <Button handleClick={this.addToInput}>3</Button> <Button handleClick={this.addToInput}>+</Button> </div> <div className="row"> <Button handleClick={this.addToInput}>.</Button> <Button handleClick={this.addToInput}>0</Button> <Button handleClick={() => this.handleEqual()}>=</Button> <Button handleClick={this.addToInput}>-</Button> </div> <div className="row"> <ClearButton handleClear={ () => this.setState({input: "" })}>Clear</ClearButton> </div> </div> </div> ); } } export default App;

Answer 1

I had this same problem and I solved it as follows:

I made a change:

  handleEqual = () => {
    this.setState({ input: math.eval(this.state.input) });
  };

where change eval to evaluate

  handleEqual = () => {
    this.setState({ input: math.evaluate(this.state.input) });
  };

Now it works perfectly. I hope this has been of great help to you

Answer 2

Try importing as a default import and then use it

import { evaluate } from 'mathjs'; 
console.log(evaluate('2 + 2'));

Answer 3

Import as evaluate

import * as math from 'mathjs';
console.log(math.evaluate('2 + 3'))

// Or
import {evaluate } from 'mathjs';
console.log(evaluate('2 + 3'))

Answer 4

I had the exact same problem and like you I did a lot to solve it but all failed. How I eventually solved it was as follows: first make sure you 've downloaded mathjs from the commandline using: npm install mathjs; and also at the top of your react code, place the statement: import * as math from 'mathjs'; (the latter which I can see you did from your code).

Now the crucial second step, is that instead of using math.eval(expr), or math.evaluate(expr) to evaluate your expression, use parse, compile in conjunction with evaluate as in the below example:

const node1= math.parse('2 + 3');
const code1= node1.compile();
code1.evaluate(); // 5

This was the way i finally tried after much failed effort with this same error and approach, but it worked. it's the alternative way of evaluating expressions as listed in the mathjs library. I understand that it's been some months since this question was asked, but this solution could still help someone in the future.

Answer 5

Use math.evaluate() instead of math.eval().

Refer this https://www.npmjs.com/package/mathjs