Bable transform fails

Question

I'm trying to use a babel transform but I'm getting errors

command

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

error

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

react component

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

@seesharper Added above `SyntaxError: app/assets/javascripts/components/admin_partner_views/actual_report.jsx: Unexpected token (46:6)` — Antarr Byrd, Jul 08 '20 at 23:22
Does this answer your question? [babel-loader jsx SyntaxError: Unexpected token](https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token) — Code-Apprentice, Jul 08 '20 at 23:25
Searching for "bable syntaxerror unexpected token" gave me [this link](https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token). See if it will help. — Code-Apprentice, Jul 08 '20 at 23:26
There is no syntax error in the jsx. So it looks like the build process does not understand the jsx, i.e. for some reason it thinks it is dealing with a plain js file. Can you post the build script itself? — see sharper, Jul 08 '20 at 23:57
(BTW I don't think this is right, logic-wise: `'btn-default': !this.state.activeReport != 'leads'`. You probably don't want the ! there.) — see sharper, Jul 08 '20 at 23:59
@seesharper I don't see a build script anywhere in the project. It was using babel. I then migrated to yarn — Antarr Byrd, Jul 09 '20 at 00:15
@seesharper My mistake I meant Bower not babel. I'm in the progress of moving to webpacker, but this happens on the master branch that does not have webpacker — Antarr Byrd, Jul 09 '20 at 00:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217493/discussion-between-see-sharper-and-antarr-byrd). — see sharper, Jul 09 '20 at 00:36

score 2 · Accepted Answer · answered Jul 09 '20 at 01:02

Your problem is that babel is probably not configured properly to understand jsx. It needs babel-preset-react. Your .babelrc file (since you are running babel direct from the command line) should look something like:

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

If you don't have a .babelrc file, create one in the project root. And you'll need to do npm install --save-dev @babel/preset-react. Link: https://babeljs.io/docs/en/babel-preset-react

Bable transform fails

1 Answers1