Unexpected Token import error, kindly guide

JavaScript
1

Hi,

I am trying to make an app in react but it seems i am unable to start it , here are my steps

  1. I run npm init

  2. i install react, react-router-dom, express, body-parser

3)I create a server page with below code -


const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const router = require('./router/index');
app.use(bodyParser.json(),bodyParser.urlencoded({extended: false}));

app.get('/', router)

app.listen(3000, (err) => console.log('server has started'))

Then to the router folder where i define my routes i create the below index.js file

const express = require('express');
const router = express.Router();
const Home = require('../components/Home');
const About = require('../components/About');

router.get('/', Home);
router.get('/about', About);

module.exports = router;

Then i create the Home and About pages in react in components folder

import React from 'react';
class About extends React.Component{
    render(){
        return(
            <div>
                About page
                </div>
        )
    }
}

export default About;

But there i keep getting the error Unexpected Token import, i do not know why i am getting the error,

Am i making the project the right way , kindly guide …

Thanks

2

Generally the answer to this is that your front end JS isn’t being compiled, so your browser doesn’t understand what import is. It sorta works in Chrome, and same in Firefox if you go into the browser config, otherwise you need to compile it with a module bundler like webpack

3

thanks @DanCouper but i installed react do i need to install any other library as well ? or any changes in package.json

4

You’re going to have to use a module bundler. Webpack is the most common, but Parcel is possibly easier as it needs almost no configuration.

Edit: what you’re experiencing at the minute is one of the reasons front end development can be a bit of a nightmare