CODEWITHSUNDEEP
javascriptreactjs
user12824095
user12824095

Reputation:

Attempted import error, failed to compile react app

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;

Upvotes: 0

Views: 2849

Answers (5)

Cristian Noguera
Cristian Noguera

Reputation: 11

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

Upvotes: 1

Hrushikesh das
Hrushikesh das

Reputation: 1

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

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

Upvotes: 0

OJ Okafor
OJ Okafor

Reputation: 11

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.

Upvotes: 0

Pushkin
Pushkin

Reputation: 3604

Import as evaluate 

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

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

Upvotes: 0

joy08
joy08

Reputation: 9662

Try importing as a default import and then use it

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

Upvotes: 0

Related Questions