CODEWITHSUNDEEP
javascriptreactjsbabeljs
Kittichote Chain
Kittichote Chain

Reputation: 681

Uncaught SyntaxError: Unexpected token in import React from 'react'

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')
)

Upvotes: 0

Views: 4395

Answers (2)

trixn
trixn

Reputation: 16354

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.

Upvotes: 0

ManavM
ManavM

Reputation: 3108

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

Upvotes: 4

Related Questions