0

I'm following this tutorial on React and MVC, and the tutorial works as stated, but the React structure I am trying to integrate is in JavaScript, not jsx.

I'm encountering Uncaught SyntaxError: Unexpected token < in the console on the browser when I run the program. The closest questions were this question, which doesn't help my issue because the project worked before I began to stray, and this question, which doesn't ask quite the same question.

Index.cshtml:

@{
  Layout = null;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
      <script type="module" src="@Url.Content("~/React/index.jsx")"></script>
  </body>
</html>

index.jsx:

import App from './src/App.js';

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

App.js: 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App text-center">
        <h1>Analytics</h1>
      </div>
    );
  }
}

Everything points to the right places, and then the Uncaught SyntaxError: Unexpected token < points to <div className="App text-center"> in App.js.

Why am I getting this error? :/

Blake Steel
  • 378
  • 1
  • 12
  • Also, this issue seems to happen compile time, because when I make a `console.log` before the `return` statement, it doesn't actually log anything. – Blake Steel Jun 01 '18 at 18:52
  • I tried bundling it together using [this Webpack tutorial](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060). Still encountering same issues. – Blake Steel Jun 04 '18 at 14:01

0 Answers0