Unexpected token - React babel

Question

I am new to the world react and I have a bug that will not let me progress. This is my webpack

module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel'
 }]
}
resolve: {
 extensions: ['', '.js', '.jsx']
},
devServer: {
 historyApiFallback: true,
 contentBase: './'
}
};

This is my code js

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

import SearchBar from './components/search_bar';

const API = '';

const App = () => {
 return (
     <div>
         <SearchBar />
     </div>
 );
}

ReactDOM.render(<App />, document.querySelector('.container'));

This is error https://gyazo.com/be83135be6f0e7b8ca0c2852536c792f

I tried this solution but it does not work babel-loader jsx SyntaxError: Unexpected token

This is a project https://github.com/jmrosdev/Practicas/tree/master/React/youtube-search

Bye and thanks!

For newer versions of react , use the new babel modules : https://stackoverflow.com/a/53927497/6665568 . It has better error messages and supports new features of react. — Natesh bhat, Dec 26 '18 at 04:44

score 11 · Accepted Answer · answered Mar 15 '16 at 22:46

11

It fails because Babel doesn't recognize the JSX syntax. So you need to install a babel preset or two:

npm install --save-dev babel-preset-react babel-preset-es2015

Create the .babelrc file at the root of your project if you don't already have one. It should have this content

{
    "presets": ["es2015", "react"]
}

answered Mar 15 '16 at 22:46

dannyjolie

10,959
3
33
28

I love it when adding a simple root file fixes weird bugs :) Thanks! – cpres May 12 '16 at 18:42
What is so strange is that I was running npm start for a while with no problems, and then started getting this error. Fortunately, your fix worked for me. – Judd Franklin Apr 28 '17 at 06:22

score 1 · Answer 2 · answered Jul 15 '17 at 22:34

1

I had the same error and the reason was that type="text/babel" was missing:

 <script src="./index.js" type="text/babel"></script>

answered Jul 15 '17 at 22:34

Stepan Yakovenko

8,670
28
113
206

Dimitris Karagiannis · Answer 3 · 2016-03-15T22:52:30.663

You are most likely not using the babel-react preset.

Make sure you have it in your dependencies, in your package.json file (if you don't have it do npm install babel-core babel-preset-es2015 babel-preset-react -D ) and in the loaders section of your webpack.config.js make this line

    module: {
     loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
     }]
    }

into this

module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel'
 },
{
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }

}]

Unexpected token - React babel

3 Answers3