Issue with Webpack using React

Question

Sorry if this is a duplicate question. I can't seem to solve this or find an answer. I have a basic Webpack setup i'm working with in conjunction with React and Django. Basically I'm getting compilation error's when using webpack.

These two webpack files aren't loading properly, both below, and neither is this App module (I think it's the provider component from redux).

I think it may be something to do with a driver - or something very simple that I've missed. I would really appreciate the help as I've been trying to fix this for a long time now haha!

Thanks!!!

webpack.config.local.config.js

    var path = require("path")
    var webpack = require('webpack')
    var BundleTracker = require('webpack-bundle-tracker')

    var ip = 'localhost'
    var config = require('./webpack.base.config.js')

    config.devtool = "#eval-source-map"

    config.entry = {
        App1: [
            'webpack-dev-server/client?http://' + ip + ':3000',
            'webpack/hot/only-dev-server',
            './reactjs/App1',
        ],
    }

    config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/'

    config.plugins = config.plugins.concat([
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new BundleTracker({filename: './webpack-stats-local.json'}),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_API_URL': JSON.stringify('https://'+ ip +':3000/api/v1/'),
            }}),
    ])

    config.module.loaders.push(
        { test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }
    )

    module.exports = config

webpack.base.config.js

var path = require("path")
var webpack = require('webpack')

module.exports = {
    context: __dirname,

    entry: {
        // Add as many entry points as you have container-react-components here
        App1: './reactjs/App1',

        vendors: ['react']
    },

    output: {
        path: path.resolve('./djreact/static/bundles/local/'),
        filename: "[name]-[hash].js"
    },

    externals: [
    ], // add all vendor libs

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    ], // add all common plugins here

    module: {
        loaders: [
            // js
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['babel'],
                presets: ['es2015', 'react'],
            },
            //    PNG
            {
                test    : /\.(png|jpg|svg)$/,
                include : path.join(__dirname, 'img'),
                loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
            },
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader'
            },


            // CSS
            {
                test: /\.scss$/,
                include: path.join(__dirname, 'client'),
                loader: 'style-loader!css-loader!sass-loader'
            }
        ] // add all common loaders here
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx']
    },
}

The App that is having some errors

App1.js

import React from "react"
import { render } from "react-dom"
import {
    createStore,
    compose,
    applyMiddleware,
    combineReducers,
} from "redux"
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import * as reducers from "./reducers"
import App1Container from "./containers/App1Container"

let finalCreateStore = compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)
let reducer = combineReducers(reducers)
let store = finalCreateStore(reducer)

class App1 extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router history = {hashHistory}>
                    <Route path="/" component={Layout}>
                        <IndexRoute component = {App1Container}/>
                    </Route>
                </Router>
                <App1Container />
            </Provider>
        )
    }
}

render(<App1/>, document.getElementById('App1'))

So here are the errors.

From webpack.local.config.js

From webpack.base.config.js

Answer 1

webpack.base.config.js => jsx syntax error, I think that is wrong babel settings

Can you share your .babelrc?

Usually, this file is as follows.

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