I'm learning react and flux, and in lesson 1 the tutorial has failed me.

This tutorial immediately breaks on 'npm start' with the following errors:

ERROR in ./src/js/main.js
Module parse failed: /Users/me/Projects/egghead-flux/src/js/main.js Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:16)
at Parser.pp$4.raise (/Users/me/Projects/egghead-flux/node_modules/acorn/dist/acorn.js:2221:15)

It doesn't seem to understand ReactDOM.render(<App />, document.getElementById('main')); I assume parsing the JSX <App /> part is failing.

Has anyone encountered this issue before? Removing / reinstalling node modules does nothing. Is there some setup step missing from the video?

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './ponents/app';
ReactDOM.render(<App />, document.getElementById('main'));

App.js

import React from 'react';
    export default class App extends React.Component {
        render(){
            return <h1>Flux</h1>
        }
    }

webpack.config.js

module.exports = {
    entry: './src/js/main.js',
    output:{
        path:'./dist',
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        inline: true,
        contentBase: './dist'
    },
    module: {
        loaders: [
            {
                test: '/\.jsx?$/',
                exclude: /(node_modules|bower_ponents)/,
                loader: 'babel',
                query:{
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

package.json

{
  "name": "egghead-flux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "flux": "^3.1.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

I'm learning react and flux, and in lesson 1 the tutorial has failed me.

This tutorial immediately breaks on 'npm start' with the following errors:

ERROR in ./src/js/main.js
Module parse failed: /Users/me/Projects/egghead-flux/src/js/main.js Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:16)
at Parser.pp$4.raise (/Users/me/Projects/egghead-flux/node_modules/acorn/dist/acorn.js:2221:15)

It doesn't seem to understand ReactDOM.render(<App />, document.getElementById('main')); I assume parsing the JSX <App /> part is failing.

Has anyone encountered this issue before? Removing / reinstalling node modules does nothing. Is there some setup step missing from the video?

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './ponents/app';
ReactDOM.render(<App />, document.getElementById('main'));

App.js

import React from 'react';
    export default class App extends React.Component {
        render(){
            return <h1>Flux</h1>
        }
    }

webpack.config.js

module.exports = {
    entry: './src/js/main.js',
    output:{
        path:'./dist',
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        inline: true,
        contentBase: './dist'
    },
    module: {
        loaders: [
            {
                test: '/\.jsx?$/',
                exclude: /(node_modules|bower_ponents)/,
                loader: 'babel',
                query:{
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

package.json

{
  "name": "egghead-flux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "flux": "^3.1.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

• javascript
• reactjs
• webpack

• Can you share with us some code? – Zack Tanner Commented Nov 15, 2016 at 17:58
• what does npm start try to do? – John Commented Nov 15, 2016 at 18:17
• @John webpack-dev-server, I've added it above. – jackdaw Commented Nov 15, 2016 at 18:22
• hm that's a head scratcher.. LGTM.. maybe if you push your project to github I can clone and take a look but at first glance it seems similar to the tutorial which apparently works. The only difference is he seems to have webpack-dev-server installed globally, since he doesn't have it in his package.json. I'm not sure why that would be an issue though. – John Commented Nov 15, 2016 at 18:40
• Try deleting the node_modules folder and run npm install to make sure all your dependencies are up to date and working – Marco Scabbiolo Commented Nov 15, 2016 at 19:05

1 Answer 1

Turns out:

test: '/\.jsx?$/',

should be:

test: /\.jsx?$/,

Dammit.