CODEWITHSUNDEEP
javascriptreactjs
Shashishekhar Hasabnis
Shashishekhar Hasabnis

Reputation: 1756

import React from "react"; resulting in Uncaught SyntaxError: Unexpected identifier

I am new to ReactJS and all the solutions I found for this problem used npm cli and suggested to use babel-plugin-transform-es2015-modules-amd. However I am using CDN and here is my code:-
1] Here is my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="js/react.production.min.js"></script>
    <script src="js/react-dom.production.min.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
      <div id="root"></div>
  </body>
  <script src="js/components/hello.jsx"></script>
</html>

where browser.min.js is actually babel and the other two react files are of version 16.5.2

2] And hello.jsx:-

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello!</h1>
            </div>
        );
    }
}

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

This code throws an error at line 1 in hello.jsx saying "Uncaught SyntaxError: Unexpected identifier" Any help is much appreciated. Thanks!

Upvotes: 1

Views: 4801

Answers (1)

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38922

Since hello.jsx is JSX. You need to indicate this to the browser by setting the script attribute.

This is done by setting the script type attribute to text/babel e.g.

<script type="text/babel" src="js/components/hello.jsx"></script>

The babel standalone script traverses the DOM for scripts with this attribute and replaces them with their transpiled equivalents.

Edit

A couple of changes to hello.jsx

  • Remove the import statements

    ReactDOM and React are globals in the context of window object.

  • Replace 

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

    with 

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

Upvotes: 1

Related Questions