Build Failure while using webpack production build

Question

I am getting Module build failed: SyntaxError: Unexpected token Error. I am getting this error while generating production build, before applying the Webpack production build configuration the same code was working earlier when using development build. Can you suggest me what i am doing wrong in webpack.config.js Here is the Error

ERROR in ./src/index.jsx
Module build failed: SyntaxError: Unexpected token (10:4)
client    |
client    |    8 |
client    |    9 | const App = () => (
client    | > 10 |     <Provider store={store}>
client    |      |     ^
client    |   11 |         <AppRoute/>
client    |   12 |     </Provider>
client    |   13 | );

Here is my webpack.config.js file code

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');


module.exports = {
    devtool: 'source-map',
    entry: {
        app: path.resolve(sourcePath, 'index.jsx')
    },
    output: {
         path: path.join(__dirname, 'dist'),
         filename: '[name].[chunkhash].js',
         publicPath: '/'
    },
    resolve: {
         extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
         modules: [
             sourcePath,
             path.resolve(__dirname, 'node_modules')
         ]
    },
    plugins: [
        new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
             name: 'vendor',
             filename: 'vendor.[chunkhash].js',
             minChunks (module) {
                 return module.context && module.context.indexOf('node_modules') >= 0;
             }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true
            },
            output: {
                comments: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer({
                        browsers: [
                          'last 3 version',
                          'ie >= 10'
                        ]
                    })
                ],
                context: staticSourcePath
            }
        }),
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(sourcePath, 'index.html'),
            path: buildPath,
            filename: 'index.html',
            minify: {
                 collapseWhitespace: true,
                 collapseInlineTagWhitespace: true,
                 removeComments: true,
                 removeRedundantAttributes: true
            }
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script',
            include: 'allChunks',
            fileBlacklist: [/\.(css|map)$/, /base?.+/]
        }),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer'
        }),
        new ExtractTextPlugin({
            filename: '[name].[contenthash].css',
            allChunks: true
        }),
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                   'babel-loader'
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        'postcss-loader',
                        'sass-loader'
                    ]
                })
            },
            {
                test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/[name]-[hash].[ext]'
            },
            {
                test: /\.(png|gif|jpg|svg)$/,
                use: [
                     'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                ],
                include: staticSourcePath
            }
       ]
   }
};

And Here is my index.jsx code.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import  AppRoute  from './pages/approute';

import 'react-table/react-table.css';

const App = () => (
    <Provider store={store}>
        <AppRoute/>
    </Provider>
);

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

Check if your .babelrc has react preset. If you don't use .babelrc then check babel section in package.json. — Yury Tarabanko
– Yury Tarabanko, Commented May 3, 2018 at 11:18

Tomasz Mularczyk · Accepted Answer · 2018-05-03 11:43:27Z

1

As pointed out in a comment there has to be something with babel configuration that webpack can't transpile JSX syntax.

Check out if you have babel-preset-react installed and turned on:

"presets": [
   "react"
],

Little nitpick - use caching for faster incremental builds:

{
   test: /\.jsx?$/,
   exclude: /node_modules/,
   use: {
     loader: 'babel-loader',
     options: {
       cacheDirectory: true,
     },
   },
},

answered May 3, 2018 at 11:43

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandy Over a year ago

Thanks for solution i got it working in between did the similar solution but added more options.

Sandy · Accepted Answer · 2018-05-03 12:01:21Z

0

Final update in webpack.config.js

test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
     loader: 'babel-loader',
     options: {
         cacheDirectory: true,
         presets: ['react', 'es2015', 'stage-3']
     }
}

answered May 3, 2018 at 12:01

Sandy

1991 silver badge10 bronze badges

Collectives™ on Stack Overflow

Build Failure while using webpack production build

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related