Trying to run webpack and getting SyntaxError: Unexpected token :

Question

I am trying to remove the webpack-validator as it is possibly throwing an error and not allowing me to use resolve object (this was the original question: Resolving relative paths in React with Webpack not working). However, after removing related code I am getting a syntax error.

context: __dirname,
       ^
SyntaxError: Unexpected token :

However, simply deleting this line move the same error to the following line and if I delete that line it just moves down again. But it is always an "Unexpected token :" error. This seems easy to fix but I can't find the mistake.

These are my webpack settings:

const {resolve} = require('path');
const webpack = require('webpack');
const {getIfUtils, removeEmpty} = require('webpack-config-utils');

module.exports = env => {
  const {ifProd, ifNotProd} = getIfUtils(env)

  entry: './index.js',
  context: __dirname,
  output: {
    path: resolve(__dirname, './build'),
    filename: 'bundle.js',
    publicPath: '/build/',
    pathinfo: ifNotProd(),
  },
  devtool: ifProd('source-map', 'eval'),
  devServer: {
    port: 8080,
    historyApiFallback: true
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'},
    ],
  },
  resolve: {
    alias: {
      shared: path.resolve(__dirname, 'app')
    }
    //modulesDirectories: ['app']
  },
  plugins: removeEmpty([
    ifProd(new webpack.optimize.DedupePlugin()),
    ifProd(new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      quiet: true,
    })),
    ifProd(new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
    })),
    ifProd(new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        screw_ie8: true, // eslint-disable-line
        warnings: false,
      },
    })),
  ])
};

score 2 · Accepted Answer · answered Mar 10 '17 at 09:40

2

You're exporting a function, but you're treating it as an object, hence the syntax error.

Try this:

module.exports = env => {
  const {ifProd, ifNotProd} = getIfUtils(env);

  return {
    entry: './index.js',
    ...
  }
};

answered Mar 10 '17 at 09:40

robertklep

198,204
35
394
381

Tatsuyuki Ishi · Answer 2 · 2017-03-10T09:14:41.973

0

~~Missing , on line 5.~~

const {ifProd, ifNotProd} = getIfUtils(env)
                                           ^

You're putting this one at the wrong place. Place it at the global scope, since you're not going to export it.

edited Mar 10 '17 at 09:14

answered Mar 10 '17 at 09:06

Tatsuyuki Ishi

3,883
3
29
41

I added that but now I am getting "SyntaxError: Missing initializer in const declaration" – dpst Mar 10 '17 at 09:12
Answer updated. Please do not **blindly** copy other's code. – Tatsuyuki Ishi Mar 10 '17 at 09:14
Where exactly should I put it? If I put it outside of the module.export it wont have the env variable. – dpst Mar 10 '17 at 09:35
I don't see you're using it right. The example mentioned in webpack-config-utils is `const {ifDevelopment, ifProduction} = getIfUtils(process.env.NODE_ENV)`. – Tatsuyuki Ishi Mar 10 '17 at 09:37

Trying to run webpack and getting SyntaxError: Unexpected token :

2 Answers2