Weird issue with React on Codepen at different views

I just finished my Javascript Calculator to my satisfaction, but when I went to look at it in the fullpage view, nothing renders from React. I get this weird error in the console:
SyntaxError: expected expression, got '<'
A sysadmin on reddit found out that the client was “getting HTML-ish errors at the top of a JSON file.”

So, I’m not really sure what’s going on. Any help would be appreciated. To reproduce the error, you can look at either the editor view Javascript Calculator and click into “full page view”, or look at the quick little Pen I whipped up to figure out how to do a modal in React. The modal playground may be a better test case because it is so much simpler and has the same error at the same point of code:
At the top of the return statement, right at the < that opens the first <div>.

const Modal = (props) => {
  if (!props.show){
    return null;
  } else {
    return(
      <div className = "backdrop" onClick={props.onClose}>
        <div className = "modal" onClick={(event) => {event.stopPropagation();}}>
          <span className="close" onClick={props.onClose}>&times;</span>
          {props.children}
        </div>
      </div>
    );
  }
};

I don’t seem to be able to reproduce the errors but the relevant bit of the code appears to tbe the same. :sweat: Has anything changed since then?

1 Like

I think what the person on Reddit was talking about is a similar-looking error you get when there is a request for a JSON resource, but what comes back is a static HTML error page - the JSON parser then tries to parse HTML and falls over. It looks more like Unexpected token < at position 0

In this case, it’s not that, and it’s (I assume) because React isn’t being loaded properly. This doesn’t have any effect up until the point in the code that the JSX starts (prior to that, the code is parseable JS - there may be missing methods etc, but no syntax issues). If you put this into the browser console, you’ll see the same error:

const myFunction = (foo) => (<I will cause a syntax error>);

You would get the error if the JSX parser hadn’t loaded, as JSX isn’t valid JS.

I think this is transient (I can’t reproduce the error), and will likely be to do with an issue on CodePen or the CDN React is being pulled down from (likely CodePen given it happened when you changed to a specific view).

2 Likes

@DanCouper: Thanks. I saw that it was balking at some of the react code, but I guess I was too close to see that it was the very first JSX that caused the parse error. Your explanation was logical, so I reloaded the pen in a cache-less private browsing window and it worked. I then went into firefox options and purged all the cookies from react and codepen. Now, the calculator works but the test pen in which I wrote the modal functionality doesn’t. (But it does in a private browsing window, so I may need to do a full cache wipe.)

@honmanyau: Dan seems to have hit on the issue as being a botched loading of react by my browser. Switching to a cache-free environment forced the reload, and it works now, which explains why neither of you were able to reproduce the error. When do we ever get to say “But it doesn’t work on my machine…”

1 Like

Probably the JavaScript Preprocessor is the one that causing the issue, make sure that the JavaScript Preprocessor is chosen and it is “Babel”

@bedward, this thread is almost 3 years old and was marked as solved. Best to respond to current topics.