First React app not starting, why am I getting syntax errors?

I strongly suspect I have a configuration or setup error, but I’m feeling stuck on getting my react component to display.

I burned too much time on CodePen. Somehow that website feels like a crutch to me, so I got my own website and am trying to get the Markdown Previewer app working. In my frustration, I’ve stripped out nearly all content, just trying to get hello world to display.
Here’s my markdownpreviewer.html:

<!DOCTYPE html>
<html>
<head>
<title>Markdown Previewer</title>
<meta charset="utf-8">
</head>

<body>
  <div id="markdown"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="markdownpreviewer.js"></script>
</body>
</html>

And here’s my markdownpreviewer.js:

'use strict';

class MarkdownPreviewer extends React.Component {
render () {
    return (<div>
        <h1>Editor</h1>
      </div>
    );
  } // end render
} // end class


ReactDOM.render(<MarkdownPreviewer />,
                document.getElementById('markdown'));

When I load this app, I get the following error in the console:
SyntaxError: unexpected token: ‘{’. (error is at line where render( ) is defined)

The render function seems unexpected.

If I add the constructor to my react component, like so:

constructor (props) {
    super(props);
    this.state = {
      input: ''
    };

Then I get a new error:
SyntaxError: expected expression, got ‘<’. (error is at line where the render function calls return(

…);

For whatever it’s worth, here’s my website:
http://fbatdesign.xyz/markdownpreviewer/markdownpreviewer.html

why have you used strict in your React file? Not sure if thats a problem, but have not seen that before.

Did you import react at the top of your markdown.js file?

I added ‘use strict’ in an attempt to get a better error message. It did not help and I removed it.

I added the following two import statements to the top of my markdownpreviewer.js file:

import React from 'react';
import ReactDOM from 'react-dom';

And now I get this confusing error message:
SyntaxError: import declarations may only appear at top level of a module. (line 1 is flagged as the error)

typically you also need a babel compiler added to to your script files in a standalone html file that is needed for the browser to understand jsx, I used to use this link a while back on similar projects

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

you may need to search online for newer options

Ultimately , maybe best to use create react app or your own webpack setup

Hmmm. I added that babel CDN to my markdownpreviewer.html file, and got some new errors:
unreachable code after return statement
babel.js:61389:2
SyntaxError: import declarations may only appear at top level of a module markdownpreviewer.js:1
Source map error: request failed with status 404
Resource URL: https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js
Source Map URL: tcc_l.combined.1.0.6.min.js.map

Do I need to source in tcc_l.combined.1.0.6.min.js ?

I agree I need babel as the codepen for the FCC projects states babel must be set for the pre-compiler.

I solved the tcc_l.combined js issue by following the steps on this godaddy support posting.

So now I’m back to one error message:
SyntaxError: import declarations may only appear at top level of a module. (line 1 of my js file is sited as the error).

Do I need to declare my <script> statements in some special order to make this work?

My current body:

<body>
  <div id="markdown"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

  <script src="markdownpreviewer.js"></script>
</body>

Yes order matters, here is what I used in the past that works

Make sure, the Babel Cdn you are using is compatible with the react version as well

Hi Dejere1,
I finally got it working this morning. The key was adding type=“text/babel” to my project’s script tag:
<script src="markdownpreviewer.js" type="text/babel"></script>
but also I had to remove the import React and import ReactDOM statements from my js file. I made this change after reviewing your Recipe js file at:


I noticed you did not call import in your file. Thank you for posting those files in your public github.
-Fred

Glad you got it working.
Yes, the type="text/babel" in the script tag is critical since otherwise it will assume that your embedded script is just regular JavaScript, and since react depends on JSX that needs to be compiled (transpiled if you wish) to JavaScript by babel, it needs to be explicitly told what the contents are for the compiler to take over.

Import statements don’t work in this case since you are embedding the entire react library (via cdn) into your file giving you access to all the library’s functionality, no modules are being exported that are to be imported by your file so it is unnecessary.

However, I would like to point out that the way you have it set up now will only be good for development (good enough for learning and testing) but will not work for production, as I mentioned before, for that you would need some type of local server setup on your machine (either with CRA or your own webpack setup) and in that event you would need to use import as the server can have access to exported modules on your machine.

1 Like

Thank you for clarifying this. The FCC React curriculum is lacking when it comes to how to actually use and deploy on a website.

Actually was reading the newer react docs earlier and they do a pretty good job explaining how to embed react directly to a website, it maybe useful to post here for people asking the same question in the future.

reference: https://reactjs.org/docs/add-react-to-a-website.html

1 Like