Learning ReactJS: Uncaught SyntaxError: Unexpected token import

Question

I'm new to ReactJS. I'm trying out the code from egghead.io and I keep getting the following error:

Uncaught SyntaxError: Unexpected token import

I have loaded babel twice now and have followed along the lesson as described, but it just won't load into the html page. Here is the codes:

index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>Setup</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "main.js"></script>
   </body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App2';

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

app2.jsx

import React from 'react';
import ReactDom from 'react-dom';

class App extends React.Component {
  render(){
    let txt = this.props.txt
    return <h1>{txt}</h1>
  }
}

App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number.isRequired
}

App.defaultProps = {
  txt: 'this is the default txt'
}

ReactDOM render(
  <App cat={5}/>,
  document.getElementById('app')
)

package.json

{
  "name": "es6-react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5"
  }
}

Please help.

I did fix that, but still have the same error. And I'm using ES5 & ES6 — muzzo
– muzzo, Commented Sep 18, 2016 at 23:16
Why don't you render in main.js? You also don't seem to export anything so I'm not sure what you're importing — Andrew Li
– Andrew Li, Commented Sep 18, 2016 at 23:17
Which file throws that? And if it's main.js can you try renaming it to main.jsx? Could be that your compiler isn't compiling that with ES6 because of it's extension. — Ben Hare
– Ben Hare, Commented Sep 18, 2016 at 23:41
It's just how the lesson is going. I returned it back to what it was before the change. — muzzo
– muzzo, Commented Sep 18, 2016 at 23:42

Madbreaks · Accepted Answer · 2018-09-14 14:48:59Z

3

After installing the Babel presets for ES6 and React you need to enable them either by creating a .babelrc file or by opting in in your package.json file.

(Confusing) docs here: http://babeljs.io/docs/usage/babelrc/

Example package.json entry enabling the presets:

"babel": {
    "presets": [
        [
          "env",
          {
            "modules": false
          }
        ],
        "react"
    ]
}

edited Sep 14, 2018 at 14:48

answered Aug 3, 2017 at 23:44

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

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

2 Comments

Romeo Sierra Over a year ago

Is it possible for you to add a small example? Cannot understand anything from the doc...

Madbreaks Over a year ago

@RomeoSierra I added an example

Phi Nguyen · Accepted Answer · 2016-09-19 01:12:02Z

0

import is the ES6 syntax. You need to npm install babel-preset-es2015 babel-preset-react --save-dev to tell babel compile your ES6 and React code.

you can load 2 packages in your webpack.config.js file :

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

I hope it will help you.

answered Sep 19, 2016 at 1:12

Phi Nguyen

3,0561 gold badge16 silver badges26 bronze badges

2 Comments

muzzo Over a year ago

I got the following error: ' module.exports = { ^ SyntaxError: Unexpected token . at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:387:25) at Object.Module._extensions..js (module.js:422:10) at Module.load (module.js:357:32) at Function.Module._load (module.js:314:12) at Module.require (module.js:367:17) at require (internal/module.js:20:19) at module.exports '

muzzo Over a year ago

Also I already added babel-preset-2015 and babel-preset-react

Collectives™ on Stack Overflow

Learning ReactJS: Uncaught SyntaxError: Unexpected token import

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related