I have been updating all the dependencies in my js program but did not change anything with any of my ponents. However now when I run

npm run build

I get an error with one of my ponents which says:

Failed to pile.

./src/ponents/DonationSummaryComponent.js
  Line 14:  '_' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A plete log of this run can be found in:
npm ERR!     C:\Users\Itay\AppData\Roaming\npm-cache\_logs\2018-09-17T08_25_54_825Z-debug.log

I tried

npm i lodash 

But this did not solve the problem.

Here is the ponent which the error is about:

import React, { Component } from 'react';
import {Alert} from 'react-bootstrap';
import {MonthlyDonations} from './MonthlyDonationsComponent.js';


export class DonationSummary extends Component {
  render() {
    var monthsComponents = [];

    var monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];  

    if(this.props.yearData.length > 0){
      var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {
        return(monthNames[(new Date(dataEntry.donationDate)).getUTCMonth()]);
      });      

      for (var monthName in monthsdata) {
        if (monthsdata.hasOwnProperty(monthName)) {
          monthsComponents.push(<MonthlyDonations key={monthName+this.props.year} monthName={monthName} monthData={monthsdata[monthName]}/>);
        }
      }
    }
    else{
      monthsComponents.push(<Alert key="noDonations" bsStyle="info"> there are no donations to display </Alert> );
    }
    return(
      <div>
        {monthsComponents}
      </div>
    );
  }
}

line 14 which the error refers to is:

var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {

The error might be related to the fact that I updated react-bootstrap react to latest version (16.5.0). Both are being used in this ponent.

I have been updating all the dependencies in my js program but did not change anything with any of my ponents. However now when I run

npm run build

I get an error with one of my ponents which says:

Failed to pile.

./src/ponents/DonationSummaryComponent.js
  Line 14:  '_' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A plete log of this run can be found in:
npm ERR!     C:\Users\Itay\AppData\Roaming\npm-cache\_logs\2018-09-17T08_25_54_825Z-debug.log

I tried

npm i lodash 

But this did not solve the problem.

Here is the ponent which the error is about:

import React, { Component } from 'react';
import {Alert} from 'react-bootstrap';
import {MonthlyDonations} from './MonthlyDonationsComponent.js';


export class DonationSummary extends Component {
  render() {
    var monthsComponents = [];

    var monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];  

    if(this.props.yearData.length > 0){
      var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {
        return(monthNames[(new Date(dataEntry.donationDate)).getUTCMonth()]);
      });      

      for (var monthName in monthsdata) {
        if (monthsdata.hasOwnProperty(monthName)) {
          monthsComponents.push(<MonthlyDonations key={monthName+this.props.year} monthName={monthName} monthData={monthsdata[monthName]}/>);
        }
      }
    }
    else{
      monthsComponents.push(<Alert key="noDonations" bsStyle="info"> there are no donations to display </Alert> );
    }
    return(
      <div>
        {monthsComponents}
      </div>
    );
  }
}

line 14 which the error refers to is:

var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {

The error might be related to the fact that I updated react-bootstrap react to latest version (16.5.0). Both are being used in this ponent.

• javascript
• node.js
• reactjs
• npm
• react-bootstrap

• 1 You need to import lodash lib as import _ from 'lodash'; – Hemadri Dasari Commented Sep 17, 2018 at 8:37
• Yep, my bad. Thanks! – jrz Commented Sep 17, 2018 at 9:20

3 Answers 3

You need to import lodash library in your ponent

PFB working code

import React, { Component } from 'react';
import {Alert} from 'react-bootstrap';
import {MonthlyDonations} from './MonthlyDonationsComponent.js';
import _ from 'lodash';

export class DonationSummary extends Component {
  render() {
    var monthsComponents = [];

    var monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];  

    if(this.props.yearData.length > 0){
      var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {
        return(monthNames[(new Date(dataEntry.donationDate)).getUTCMonth()]);
      });      

      for (var monthName in monthsdata) {
        if (monthsdata.hasOwnProperty(monthName)) {
          monthsComponents.push(<MonthlyDonations key={monthName+this.props.year} monthName={monthName} monthData={monthsdata[monthName]}/>);
        }
      }
    }
    else{
      monthsComponents.push(<Alert key="noDonations" bsStyle="info"> there are no donations to display </Alert> );
    }
    return(
      <div>
        {monthsComponents}
      </div>
    );
  }
}

You are not importing lodash in your ponent.

You should add import _ from 'lodash'; and it will work

You need to import lodash library.

import _ from 'lodash'

I would remend to use lodash.groupby, which will also decrease bundle size. Please install this package and import it:

import groupBy from 'lodash.groupby'

and then use:

var monthsdata = groupBy(this.props.yearData, function(dataEntry) {