Unexpected token '<' in React (HTML file)

Question

Before starting: -Can't use Node, jsx, extensions or any other thing (rule in my work, nothing I can do about it) -I need an HTML file with references to other scripts -I have problems with babel...

What I need is an HTML file with references to other scripts (NOT EVERYTHING ON THE HTML file), and being able to write "normal" HTML in them...

So, I have this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  </head>
  <body>
    <h1>HTML with multiple scripts using React.js</h1>
    <p>React.js without Node.js or any other thing</p>
    <p>React.js is loaded as script tags.</p>
    <div>
      <div id="like_button_container"></div>
      <div id="like_button_container2"></div>
    </div>
    <script src="like_button.js"></script>
    <script src="like_button2.js"></script>
  </body>
</html>

like_button.js :

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

like_button2.js :

'use strict';

const f = React.createElement;

class LikeButton2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return f(
      'h1',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer2 = document.querySelector('#like_button_container2');
ReactDOM.render(f(LikeButton2), domContainer2);

And as you can see, I can't write "normal" HTML, I have to do it within quotation marks... which is really limiting and ugly:

 return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );

If I try to write "normal" HTML:

return e(
          <button>WASD</button>
        );

I get the error: Unexpected token '<':

https://i.stack.imgur.com/szNjA.png

NOW NOW NOW, I know that you will tell me to import/use babel, but if I do and put the "text/babel" attribute in the script tag, I get this error: 'Access to XMLHttpRequest at 'file:///C:/Users/edunec/Desktop/wasd/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.'

https://i.stack.imgur.com/gtc3R.png

Please someone help me, as I said, I need an HTML file with references to other scripts (not everything in the same script), and being able to write "normal" HTML... can't use Node or jsx or any other thing, it has to be done this way (rule at work).

If for some reason this is not possible (doubt it), I need to know how to write HTML within quotation marks and how to do more complicated things with it (like one element inside the other...), and If someone knows how to render both scripts to the same div within a parent wrapper, I'll be thankful too.

Thank you in advance.

I did, and it gives me an error, I said it two times in my post. — PaulWZ, Dec 26 '19 at 08:07
Did you try import babel and run in local server? https://stackoverflow.com/a/52919513/5601899 — Alexander Vidaurre Arroyo, Dec 26 '19 at 08:55
At the very least you'll need to run a local webserver instead of opening the file as `file://`... Sounds like you're trying to develop React with both hands tied behind your back, which surely isn't very productive. If this is supposed to be your job, you really should ensure you can get a decent development environment going. (Not that that's very helpful advice probably, I know…) — deceze, Dec 26 '19 at 08:55

score 0 · Answer 1 · answered Dec 26 '19 at 12:17

2 solutions which will be work & useful and your limitations might/might-not allow:

The file like_button.js which is in your same folder as index.html, when accessed by browser treat it as a file of different domain (when given its full path like - file:///../../like_button.js) as it falls out of the index.html file. Hence the CORS issue comes in here. So you better open the file in browser's unsafe mode - for this run the below command after closing all your browser windows - "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp. You should be successfully able to use the component.
Run a local server.

Also you might want to change the code in your like_button.js :

Change return e(<button>WASD</button>); to

return <button>WASD</button>;

Let me know if this works or not.

Unexpected token '<' in React (HTML file)

1 Answers1