React-rails: React w/ Webpacker - SyntaxError: Unexpected token

[kyleknighted]

Help us help you! Please choose one:

• [X] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [X] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.

---

Getting this error on a simple React component.

• Rails 5.1
• react-rails
• webpacker

/app/javascript/components/Host.es6.jsx
Module build failed: SyntaxError: Unexpected token (4:16)

  2 | 
  3 | class Host extends Component {
> 4 |   renderHostRow = (host) => {
    |                 ^
  5 |     return (
  6 |       <tr>
  7 |         <td></td>

 @ ./app/javascript/components ^\.\/.*$
 @ ./app/javascript/packs/application.js
 @ multi (webpack)-dev-server/client?https://localhost:8080 ./app/javascript/packs/application.js

I updated /config/webpack/loaders/react.js to include React and ES2015 presets

module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: ['react', 'es2015']
  }
}

The actual component code is pretty straightforward
This is a component I simplified that works in a straight React application.
I removed the PropTypes, states, etc, and just got it down to simply render a table.
It still fails.

import React, { Component, PropTypes } from 'react';

class Host extends Component {
  renderHostRow = (host) => {
    return (
      <tr>
        <td>..hostname..</td>
        <td>..user..</td>
        <td>macOS {host.os_name}</td>
        <td>{host.hardware_serial}</td>
      </tr>
    );
  }

  render() {
    const { renderHostRow } = this;
    const { hosts } = this.props;

    return (
      <table>
        <thead>
          <tr>
            <th>Hostname</th>
            <th>User</th>
            <th>OS</th>
            <th>Serial #</th>
          </tr>
        </thead>
        <tbody>
          {hosts.map((host) => {
            return renderHostRow(host);
          })}
        </tbody>
      </table>
    );
  }
}

export default Host;

Any ideas would be greatly appreciated.

[rmosolgo]

I don't know much about es6 so I gave it a try in the babel REPL. I found that stage-2 is required for this:

Try adding that to your presets as well and please reopen this issue if it doesn't fix the problem!

[kyleknighted]

Just wanted to check back in to inform you that this seems to have fixed the issue. Thanks for pointing out that preset! It's not one I've had to intentionally use before.

[Jfeng3]

@rmosolgo new to react. what is the tool you use to check syntax? the website that you can choose stage-0 stage-2 etc

[kyleknighted]

@Jfeng3 https://babeljs.io/

[jerikthompson]

@Jfeng3 https://babeljs.io/repl/ this link is the Babel sandbox tool