Преобразование Бэйбла не удается - PullRequest
Новая
       28

Преобразование Бэйбла не удается

0 голосов
/ 09 июля 2020

Я пытаюсь использовать преобразование Babel, но получаю ошибки

команда 

babel --plugins transform-react-remove-prop-types app/assets/javascripts/components

ошибка 

SyntaxError: app/assets/javascripts/components/admin_partner_views/actual_report.jsx: Unexpected token (46:6)
 44 | 
  45 |     return (
> 46 |       <div className="btn-group btn-group-justified">
     |       ^
  47 |         <div className="btn-group">
  48 |           <button className={leadsButtonClass} onClick={this.activateReport.bind(this, 'leads')}>
  49 |             Leads Report

реагирующий компонент 

"use strict";

var AdminPartnerReportView = React.createClass({

  getInitialState: function() {
    var activeReport;

    if (!this.props.leadSource.leads_view || !this.props.leadSource.calls_view) {
      activeReport = this.props.leadSource.leads_view ? 'leads' : this.props.leadSource.calls_view ? 'calls' : null;

    } else if (this.props.leadSource.leads_view && this.props.leadSource.calls_view) {
      activeReport = null;

    }

    return {activeReport: activeReport};
  },

  activateReport: function(reportName) {
    this.setState({activeReport: reportName});
  },

  reportChooser: function() {
    if (!this.props.leadSource.leads_view || !this.props.leadSource.calls_view) {
      return null;
    }


    var cx = React.addons.classSet,
        leadsButtonClass,
        callsButtonClass;

    leadsButtonClass = cx({
      'btn': true,
      'btn-primary': this.state.activeReport == 'leads',
      'btn-default': !this.state.activeReport != 'leads'
    });

    callsButtonClass = cx({
      'btn': true,
      'btn-primary': this.state.activeReport == 'calls',
      'btn-default': this.state.activeReport != 'calls'
    });

    return (
      <div className="btn-group btn-group-justified">
        <div className="btn-group">
          <button className={leadsButtonClass} onClick={this.activateReport.bind(this, 'leads')}>
            Leads Report
          </button>
        </div>

        <div className="btn-group">
          <button className={callsButtonClass} onClick={this.activateReport.bind(this, 'calls')}>
            Calls Report
          </button>
        </div>
      </div>
    )
  },


  reportToRender: function() {
    if (this.state.activeReport == 'leads') {
      return <LeadSourceLeads leadSourceId={this.props.leadSource.id}/>

    } else if (this.state.activeReport == 'calls') {
      return <LeadSourceCalls leadSourceId={this.props.leadSource.id}/>

    } else {
      return null

    }

  },

  render: function() {
    return (
      <div className="col-xs-12">
        {this.reportChooser()}
        {this.reportToRender()}
      </div>
    )
  }
});

1 Ответ

2 голосов
/ 09 июля 2020

Ваша проблема в том, что babel, вероятно, неправильно настроен для понимания jsx. Требуется babel-preset-react. Ваш файл .babelrc (поскольку вы запускаете babel прямо из командной строки) должен выглядеть примерно так: 

{
  "presets": ["@babel/preset-react"],
  "env": {
    "development": {
      "presets": [["@babel/preset-react", { "development": true }]]
    }
  }
}

Если у вас нет файла .babelrc, создайте его в проекте root. И вам нужно будет сделать npm install --save-dev @babel/preset-react. Ссылка: https://babeljs.io/docs/en/babel-preset-react

...