React in HTML Uncaught SyntaxError: Unexpected token '<'

Question

I'm trying to work React into my HTML page which I'm trying to create dynamic cards from bootstrap, but I keep getting Here's what I have so far

service.html

<head>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="services-load"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

  <script type="module" src="rjs.js"></script>
</body>

rjs.js

const e = React.createElement;
import Card from "./services/Cards";

const domContainer = document.querySelector('#services-load');
ReactDOM.render(e(<Card />), domContainer);

Cards.js

import Card from "./CardUI";
import img1 from "../assets/imgs/services/botox.jpg";
import img2 from "../assets/imgs/services/lipo.jpg";
import img3 from "../assets/imgs/services/prp.jpg";

const Card = props => {
  return (
    <div className="container aesthetic-body">
      <div className="row">
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img1}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img2}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img3}/>
        </div>
      </div>
    </div>
  );
}

export default Card;

CardUI.js

const Card = props => {
  return (
    <div className="card">
        <a href="">
          <div className="card-header">BOTOX / FILLERS</div>
          <img className="card-img-top" src={props.imgsrc} alt={"Card image cap"}/>
        </a>
      </div>
  );
}

export default Card;

Update: Here's My file structure

tmhao2005 · Accepted Answer · 2020-09-06 13:02:22Z

1

In order to work with import, you need to add a plugin for transforming transform-es2015-modules-umd by specify the plugins on <script />.

Let's imagine you have a following structure:

public
 - foo.js
 - index.js
 - index.html

foo.js exports an simple component like this:

export default () => <div>Foo</div>;

index.js is all about importing and boostrap:

import Foo from "foo";

ReactDOM.render(<Foo />, document.getElementById("root"));

Finally, register modules in index.html:

<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./foo.js"
></script>
<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./index.js"
></script>
</body>

Here is full code in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>

    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>

Also the codesanbox link: https://codesandbox.io/s/quizzical-bird-vwn5t?file=/public/index.js

edited Sep 6, 2020 at 13:02

answered Sep 6, 2020 at 12:41

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ljdayekh Over a year ago

hello I'm getting Uncaught Error: Invalid plugin specified in Babel options: "transform-es2015-modules-umd" I've installed npm install --save-dev babel-plugin-transform-es2015-modules-umd but still nothing

tmhao2005 Over a year ago

You don’t need to install anything, you just copy and run code via the browser

tmhao2005 Over a year ago

If you are not keen to browser anymore, you can simply switch to webpack which is quite easy for configuration. I thought you’re interested in playing with browser :)

ljdayekh Over a year ago

Thank you for that! But im still getting the invalid plugin. I saw your package.json file and mine looks different. Sorry I'm still learning how to use react thank you for baring with me. "name": "clinic45", "version": "1.0.0", "description": "", "main": "rjs.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "@babel/preset-react": "^7.10.4", "webpack-cdn-plugin": "^3.3.1" } }

tmhao2005 Over a year ago

I’m not sure I’m guessing right. Do you mean you don’t know how to configure webpack?

|

underscore · Accepted Answer · 2020-09-06 11:34:09Z

0

You can't write HTML on js file. you need to switch to jsx ( Javascript XML ) file format.

Rename your files to Cards.js => Cards.jsx and CardUI.js => CardUI.jsx

answered Sep 6, 2020 at 11:34

underscore

6,9277 gold badges44 silver badges82 bronze badges

2 Comments

ljdayekh Over a year ago

I did that before and did it now again same error :/

underscore Over a year ago

please follow proper document of converting babel code to pure javascript

Azmanabdlh · Accepted Answer · 2020-09-06 11:38:59Z

0

I think you need a babel transpiler to translate the JSX syntax.

https://babeljs.io/

for react : https://babeljs.io/docs/en/babel-preset-react

answered Sep 6, 2020 at 11:38

Azmanabdlh

534 bronze badges

2 Comments

ljdayekh Over a year ago

I'm using this <script src="unpkg.com/@babel/standalone/babel.min.js"></script> shouldn't that translate?

Azmanabdlh Over a year ago

it should translate but not for standalone react components like CardUI.jsx or CardUI.js. so you need babel to translate CardUI.js You can view it here: reactjs.org/docs/…

Collectives™ on Stack Overflow

React in HTML Uncaught SyntaxError: Unexpected token '<'

3 Answers 3

9 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related