React js tomcat, Uncaught SyntaxError: Unexpected token import

Question

I am new to react js, i am trying to create react js based simple page using export and import functionality. Below is the description

App.jsx

import React from '../build/react'

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

main.jsx

import {ReactDOM} from '../build/react-dom'
import {App} from 'App'

ReactDOM.render(<App />, document.getElementById('app'));

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

     <script src="build/browser.min.js"></script>
      <script src="custom/main.jsx"></script>
  </head>

</html>

I have deployed it on tomcat, when i am trying to access "test.html" from browser it is giving me

Uncaught SyntaxError: Unexpected token import at main.jsx : 1

Please help me, whether i have missed anything in this.

import and export will not work natively in the browser. — Davin Tryon
Thanks Davin for your quick reply. What i need to do to run this example? — user3509911

Djesu Djesu · Accepted Answer · 2018-03-16T17:26:59

I had a similar problem. I did all that I could to solve it but to no avail. I deleted node_module from C: and issued npm install to reinstall node_module but still no solution.

I replaced my package.json with

{
    "name": "react-frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "axios": "^0.16.2",
    "express": "^4.16.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "react-scripts": "0.9.5"
  },
    "devDependencies": {},
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

and replaced my index.js with

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import App from './App';

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

I later made changes to them to suit my app's requirements. It worked perfectly - I can't explain how it happened.

React js tomcat, Uncaught SyntaxError: Unexpected token import

1 Answers