Error adding React with HTML page,Unexpected token '<'

Question

I have added a React functional component with existing HTML page, getting a strange error : Uncaught SyntaxError: Unexpected token '<'

HTML


<html lang="en">
<body>
    <div id="like_button_container"></div>

    <script src="https://unpkg.com/react@16.8/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16.8/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

</body>
</html>

connected JS

"use strict";

function Like_button() {
  const [like, setLike] = React.useState(false);
  return (
    <div>
      {like ? <p>you liked t</p> : null}
      <button onClick={() => setLike(true)}>click</button>
    </div>
  );
}


const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(React.createElement(Like_button), domContainer);

perhaps error with React version – Anoop K George Jun 11 '20 at 11:42 — Anoop K George, Jun 11 '20 at 11:42
what is the `=` at the top of the html file doing? – Red Baron Jun 11 '20 at 11:45 — Red Baron, Jun 11 '20 at 11:45
Actually a typo during copy paste – Anoop K George Jun 11 '20 at 11:47 — Anoop K George, Jun 11 '20 at 11:47
Add `type = "text/babel"`or `text/jsx` to the ` – 0stone0 Jun 11 '20 at 11:50 — 0stone0, Jun 11 '20 at 11:50

score 1 · Answer 1 · answered Jun 11 '20 at 11:49

1

trying replacing this in the html:

from:

<script src="like_button.js"></script>

to:

<script type="text/jsx" src="./like_button.js"></script>

you need to tell it to use jsx

answered Jun 11 '20 at 11:49

Red Baron

7,181
10
39
86

So it's an exact duplicate of [this](https://stackoverflow.com/a/33481482/5625547) answer? – 0stone0 Jun 11 '20 at 11:51
ah yes I guess so! I hadn't seen that answer before – Red Baron Jun 11 '20 at 11:52
shall we vote to close? – Red Baron Jun 11 '20 at 11:52
Yeah, of course – 0stone0 Jun 11 '20 at 11:55
Encountered new error,Access to XMLHttpRequest at 'file:///C:/Users/dell/Desktop/try/like_button.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – Anoop K George Jun 11 '20 at 12:00
@AnoopKGeorge we should close this question as it is a duplicate and you should ask a new question if you are getting a new error – Red Baron Jun 11 '20 at 12:01
ok, I will close it – Anoop K George Jun 11 '20 at 12:02

score 1 · Answer 2 · answered Jun 11 '20 at 12:07

first, you should add babel-core CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> then add text/babel to your script like this:

<div id="like_button_container"></div>
<script type="text/babel" src="./like_button.js"></script>

Error adding React with HTML page,Unexpected token '<'

2 Answers2