1

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 error

From webpack.base.config.js

error 2

1 Answer 1

3

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"]
 }
Sign up to request clarification or add additional context in comments.

1 Comment

Will check this ASAP!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.