Syntax error "Unexpected token" while following React + Node.js blog tutorial

Question

I'm following a Site Point tutorial to try to create a React app.

I'm stuck on these steps:

1. mkdir public
2. npm install
3. npm run developement

The first command will fail, since I already have a 'public' folder(?) with lots of resource folders and index.html.

npm install works just as expected.

npm run development runs into a syntax error:

ERROR in ./app-client.js
Module build failed: SyntaxError: Unexpected token (12:2)

  10 |
  11 | const Routes = (
> 12 |   <Router history={history}>
     |   ^
  13 |     { routes }
  14 |   </Router>
  15 | )

After copy-pasting everything for the nth time, I'm pretty sure there aren't any typos in app-client.js. Here it is:

// app-client.js
import React from 'react'
import { render } from 'react-dom'
import { Router } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
const history = createBrowserHistory()

// Routes
import routes from './routes'

const Routes = (
  <Router history={history}>
    { routes }
  </Router>
)

const app = document.getElementById('app')
render(Routes, app)

And my folder structure is the same as in the tutorial:

package.json
public
  |-css
    |-bootstrap.min.css
    |-cosmic-custom.css
  |-js
    |-jquery.min.js
    |-bootstrap.min.js
    |-clean-blog.min.js
views
  |-index.html
webpack.config.js

Which also makes me quite puzzled as to why I would run "mkdir public" here?

I tried renaming files to have a .jsx ending; that didn't work. Additionally, this is my webpack.conf.js file:

// webpack.config.js
var webpack = require('webpack')

module.exports = {
  devtool: 'eval',
  entry: './app-client.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      { test: /\.js$/, loaders: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loaders: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET),
      'process.env.COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY),
      'process.env.COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY)
    })
 ]
};

Answer 1

Inside your webpack.config.js you need to modify your loaders,

Firstly, instead of two times including the same loader, include only one time.

Secondly, instead of using loaders inside loaders array use loader without s.

Like below:

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

And finally install babel-preset-stage-0, babel-preset-react, es2015 as a development dependency like npm install --save-dev babel-preset-stage-0 babel-preset-es2015 babel-preset-react, and use an inside query Object like this:

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

Preferably the other way is creating .babelrc file instead of query inside webpack.config.js in the root (where your webpack.config.js) is and then including the code below:

{presets: ['stage-0','es2015', 'react']}

If all of this is overwhelming, the best place to start React without worrying about any dependency or other issues is create-react-app.