I try to build up my react template project with webpack v2.2.1 & web pack-dev-sever v2.4.1. When I run "webpack-dev-server --progress --hot --inline --colors", the web pack reports "Failed to pile".

I checked my .js file & config file, but couldn't find error. Can anyone help me to solve this problem? Thank you.

The error message

ERROR in ./src/app.js
Module parse failed: /Users/liszt/Develop/react-project/src/app.js Unexpected token (7:9)
You may need an appropriate loader to handle this file type.
| const App = {
|   render() {
|       return <div>
|           Hi
|       </div>
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app.js
webpack: Failed to pile.

These are my app.js files and web pack config

app.js

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

const App = {
    render() {
        return <div>
            Hi
        </div>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

webpack.config.js

const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // For css bundle

// For minifying the js. The config is for ignoring the warning msgs
const uglifyJsCfg = new Webpack.optimize.UglifyJsPlugin({
    press: {
        warnings: false
    }
})

const extractCommonsCfg = new Webpack.optimize.CommonsChunkPlugin({
    name: 'vender',
    filename: 'vender.js'
})

const extraCssCfg = new ExtractTextPlugin('style.css')

module.exports = {
    entry: {
        app: './src/app.js',
        vender: [
            'react',
            'react-dom',
        ]
    },

    output: {
        path: `${__dirname}/dist`,
        filename: "app.js"
    },

    module: {
        rules: [
            {
                test: /src\/\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /assets\/less\/\.less$/,
                loader: ExtractTextPlugin
            },
            {
                test: /assets\/img\/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            }
        ]
    }, 

    plugins: [
        extractCommonsCfg,
        extraCssCfg,
        uglifyJsCfg,
        new Webpack.NamedModulesPlugin()
    ]
}

My .babelrc

{
    presets: ['es2015', 'react'],
    plugins: ["transform-object-rest-spread"],
    env: {
        "production": {
            "plugins": ["transform-react-remove-prop-types"]
        }
    }
}

I try to build up my react template project with webpack v2.2.1 & web pack-dev-sever v2.4.1. When I run "webpack-dev-server --progress --hot --inline --colors", the web pack reports "Failed to pile".

I checked my .js file & config file, but couldn't find error. Can anyone help me to solve this problem? Thank you.

The error message

ERROR in ./src/app.js
Module parse failed: /Users/liszt/Develop/react-project/src/app.js Unexpected token (7:9)
You may need an appropriate loader to handle this file type.
| const App = {
|   render() {
|       return <div>
|           Hi
|       </div>
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app.js
webpack: Failed to pile.

These are my app.js files and web pack config

app.js

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

const App = {
    render() {
        return <div>
            Hi
        </div>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

webpack.config.js

const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // For css bundle

// For minifying the js. The config is for ignoring the warning msgs
const uglifyJsCfg = new Webpack.optimize.UglifyJsPlugin({
    press: {
        warnings: false
    }
})

const extractCommonsCfg = new Webpack.optimize.CommonsChunkPlugin({
    name: 'vender',
    filename: 'vender.js'
})

const extraCssCfg = new ExtractTextPlugin('style.css')

module.exports = {
    entry: {
        app: './src/app.js',
        vender: [
            'react',
            'react-dom',
        ]
    },

    output: {
        path: `${__dirname}/dist`,
        filename: "app.js"
    },

    module: {
        rules: [
            {
                test: /src\/\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /assets\/less\/\.less$/,
                loader: ExtractTextPlugin
            },
            {
                test: /assets\/img\/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            }
        ]
    }, 

    plugins: [
        extractCommonsCfg,
        extraCssCfg,
        uglifyJsCfg,
        new Webpack.NamedModulesPlugin()
    ]
}

My .babelrc

{
    presets: ['es2015', 'react'],
    plugins: ["transform-object-rest-spread"],
    env: {
        "production": {
            "plugins": ["transform-react-remove-prop-types"]
        }
    }
}

• javascript
• reactjs
• webpack

• 1 How did you configure Babel? – Felix Kling Commented Mar 5, 2017 at 14:58
• 1 @FelixKling, have added to the post. – Ezek Commented Mar 5, 2017 at 15:02

1 Answer 1

This test regex test: /src\/\.jsx?$/,

might need a * in it: test: /src\/\*.jsx?$/,

Since you already declare the entry point, you don't necessarily need to specify the directory src in the test. So this is preferable:

test: /\.jsx?$/,