Search code examples
javascriptreactjswebpackreactjs-flux

Module build failed: SyntaxError: Unexpected token error when trying to render a second component

I am a relatively new to ReactJs or UI coding, in general. Have spent the entire day trying to debug this problem, to no avail. I have a single entry point in my ReactJs app - app.js

var React = require("react");
var ReactDOM = require("react-dom");
import Main from "./components/Main";
import Bucket from "./components/Bucket";
import Relay from "react-relay";

ReactDOM.render(<Main />,document.getElementById('react'));
ReactDOM.render(<Bucket />,document.getElementById('react-bucket'));

console.log(Relay.QL`query Test {ServerGroups {_id}}`);

I am trying to render 2 components here in a single page here : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>

The first component 'react' renders just fine. But the 2nd one 'react-bucket', which uses the same exact logic with similar data, does not render at all. Webpack throws the following error :

Module build failed: SyntaxError: Unexpected token, expected

against the {justBucketDOMElement} - pointing at the "{"

Below is the code for the react component

render(){
  return(
    <table>
      <tbody>
      <tr>
        <th>AppName</th>
        <th>BucketName</th>
        <th>RAMQuotaInGB</th>
        <th>ReplicaNumber</th>
        <th>ServerList</th>
      </tr>
      {
        this.state.allBuckets.map(function(oneAppBucket){
          var justBucketDOMElement = oneAppBucket.buckets.map(function(bucketInfo){
            return(
              <tr>
                <td key={bucketInfo.bucket_name}>{bucketInfo.bucket_name}</td>
                <td key={bucketInfo.bucket_name}>{bucketInfo.evictionPolicy}</td>
                <td key={bucketInfo.RAMQuota}>{bucketInfo.RAMQuota}</td>
                <td key={bucketInfo.ReplicaNumber}>{bucketInfo.ReplicaNumber}</td>
                <td key={bucketInfo.ServerList[0]}>{bucketInfo.ServerList.join(",")}</td>
              </tr>
            )
          });
          return(
            <tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
          {justBucketDOMElement}    **// this is where the error happens**
          )
        })
      }
      </tbody>
    </table>
  );
}

The data coming back is like the below : 

 {
"BucketList": [
  {
    "app_name": "gem",
    "buckets": [
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 3,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "config"
      },
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 3,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "failed_events"
      },
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 6,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "events"
      }
    ]
  }

Thanks so much for helping out. Really been stumped with this one.

Solution

  • The thing is, return be should returning one object, you can try wrapping them with a div.

    return(
    <div>
        <tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
        {justBucketDOMElement}    **// this is where the error happens**
    </div>
)