Ошибка компиляции npm ('_' не определено) - PullRequest
Новая
       20

Ошибка компиляции npm ('_' не определено)

0 голосов
/ 17 сентября 2018

Я обновлял все зависимости в моей программе js, но ничего не изменил ни с одним из моих компонентов. Однако теперь, когда я бегу 

npm run build

Я получаю ошибку с одним из моих компонентов, который говорит: 

Failed to compile.

./src/components/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! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete 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

Я пытался 

npm i lodash

Но это не решило проблему.

Вот компонент, о котором идет ошибка: 

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>
    );
  }
}

строка 14, к которой относится ошибка: 

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

Ошибка может быть связана с тем, что я обновил реакцию-загрузчик реакции на последнюю версию (16.5.0). Оба используются в этом компоненте.

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Вы не импортируете lodash в свой компонент.

Вы должны добавить import _ from 'lodash';, и это будет работать

0 голосов
/ 17 сентября 2018

Вам необходимо импортировать библиотеку lodash.

импорт _ из 'lodash'

Я бы порекомендовал использовать lodash.groupby , что также уменьшит размер пакета. Пожалуйста, установите этот пакет и импортируйте его:

импорт groupBy из 'lodash.groupby'

и затем используйте:

var monthsdata = groupBy (this.props.yearData, функция (dataEntry) {

0 голосов
/ 17 сентября 2018

Вам необходимо импортировать библиотеку lodash в ваш компонент

Рабочий код PFB 

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>
    );
  }
}
...