0

I used to write a react app by using create-react-app and there was no problem. However, I tried to make a small app using only index.html and app.js. Errors were raised in Chrome to import and JSX. For import, Uncaught SyntaxError: Unexpected tokenFor JSX, Uncaught SyntaxError: Unexpected token <Is it because I did not install BABEL or ES6.

I tried to install babel but it still did not work. I also tried adding type="text/babel"

index.html

<!Doctype html>
<html>

<head>
    <title>Social Card</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>content fahafafafaddha</h1>
    <div id="root">
    </div>
    <script src= "app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>

app.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
    <h1> Hello</h1>,
    document.getElementById('root')
)
Improve this question
5
  • Possible duplicate of How to load es6, react, babel code in html with cdn? Commented Mar 3, 2019 at 13:07
  • Thank you, I already tried adding three lines of babel, react, and react-dom, but somehow it still didn't work. same error Uncaught SyntaxError: Unexpected token Commented Mar 4, 2019 at 1:18
  • Please also add the relevant code and the html with script tags to your question. Commented Mar 4, 2019 at 1:20
  • have you tried putting the react/babel script tags in the head of the doc, as it is in the link provided by trixn? I'd assume you need the browser to load/run those before your app.js Commented Mar 4, 2019 at 6:12
  • Scripts are loaded in the order of occurrence in the html file. So your app.js needs to come after the other ones because it requires those to function. Also if this is a new project is suggest to use the latest versions of babel and react. Yours are quite outdated. Commented Mar 4, 2019 at 10:08

2 Answers 2

Reset to default
4

The error is definitely because your code has not been transpiled (which is what babel does). You say that you installed babel..what do you mean by that? You need to configure babel so that it transpiles your code before you run it. create-react-app does it for you by using webpack to transpile, bundle and minify your code.

If you want to learn more about the specifics of how things are working and how to configure your app, Create a new create-react-app, and then run

npm run eject

This will eject all of the previously hidden configurations and help you understand how things are functioning.

UPDATE

One thing you can try is to inst all babel-cli with

npm install --save-dev @babel/core @babel/cli

and then you can use it like

npx babel app.js --out-file app-compiled.js

and use app-compiled to run the server.

UPDATE 2

You are using ES6 syntax (the import statements) as well as JSX (using HTML-ish code in a javascript file). This code cannot be compiled directly by a JS compiler and that's why it's showing you the above error. In order to fix this you need to transpile it into JS that can be read by the browser. There are several ways to do that, some of which are:

  • Use webpack to transpile, minify, bundle and inject your code into your html.

  • Use babel-cli to transpile your code manually, and then import the transpiled file instead

  • Use babel standalone as is explained here

As for what I meant by use app-compiled, I meant include the output file from the babel-cli command (app-compile.js if you ran the command i wrote above) in your html instead of app.js

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

5 Comments

As far as I understood OP does not want to use create-react-app or webpack. He just wants to include react and babel via a script tag in his html.
My goal is to be able to run the react app, eliminating the errors. Initially, I would like to install babel to my pc, but could not figure out how to do it. Therefore, I instead tried adding script tags of Babel, react, and react-dom, but it still didn't work.
I also tried npx babel app.js --out-file app-compiled.js but there's still an error BABEL_PARSE_ERROR raising on the "<" of the <h1>Hello</h1>
ManavM, thank you very much. But what do you mean by "use app-compiled" to run the server?
@KittichoteKamalapirat I have added some further explanation to the answer, it should help you understand what is going on.
0

The order of your <script> tags is important. They are loaded in the order they appear. So your app.js must come after babel and react:

<div id="root"></div>

<!-- DEPENDENCIES MUST COME FIRST -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- Your scripts -->
<script type="text/babel">
    const App = () => <h1>Hello React!</h1>;
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

Next you can't use import statements when including your dependencies only with script tags. They will simply be available in global namespace. You could maybe use modules too when specifying the type="module" attribute on the script tags but that feature was only fairly recently added and may not be supported by a percentage of currently used browser versions.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.