Converting an existing app to react produces unexpected token '<'

Question

I'm new to React. I have an existing traditional web app (uses jquery) that I would like to convert to React, but am getting an error in the browser. I have used create-react-app to create a new React project. In index.html, I added my html under the

<div id="root"></div>

My./src/index.js is the standard:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render(<App />, document.getElementById('root'))

My App.js is the standard: import React, {Component} from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

When I run it with "npm start", the "Hello World" is displayed, followed by my existing html. But that page shows the existing html with none of the javascript functionality behind it. The index.html contains a link to the existing javascript, like this:

<script src="../src/components/SplitPane/SplitPane.js"></script>

That javascript starts with jquery like this:

(function($) {

  $.fn.splitPane = function() {
    var $splitPanes = this;
    $splitPanes.each(setMinHeightAndMinWidth);

In the Chrome console, I see the error:

Uncaught SyntaxError: Unexpected token '<' (on line 1 of SplitPane.js)

That line doesn't even have any '<' or '>' tokens so the error doesn't make sense.

Any ideas?

Answer 1

Please check your code for HTML, > is missing.