Unexpected token: name (p) Error with webpack and uglify

75 Views Asked by At

I am trying to Build the React application using webpack(3.5.5). But the build is getting failed. tried building with adding UglifyJSPlugin by installing the npm package, But of no use. Constantly getting the following errors.

Unexpected token: name (p) [16.d5eb16ccc8c5201b1051.chunk.js:45,2216019]

ERROR in 24.5eae72236fb47c9d684c.chunk.js from UglifyJs
Name expected [24.5eae72236fb47c9d684c.chunk.js:203,79243]

ERROR in 25.073414cb2e702698d047.chunk.js from UglifyJs
Unexpected token: operator (>) [25.073414cb2e702698d047.chunk.js:11,739624]

ERROR in 29.789e2b12c49f601335f9.chunk.js from UglifyJs
Name expected [29.789e2b12c49f601335f9.chunk.js:35,9332]

ERROR in 90.79975be9deb9e4227618.chunk.js from UglifyJs
Invalid assignment [90.79975be9deb9e4227618.chunk.js:22,98334]

here are my webpack config files

webpack.prod.babel.js

// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = require('./webpack.base.babel')({
  // In production, we skip all hot-reloading stuff
  entry: [
    path.join(process.cwd(), 'app/app.js'),
  ],
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      children: true,
      minChunks: 2,
      async: true,
    }),

    new UglifyJSPlugin(), //minify everything
    new webpack.EnvironmentPlugin(['REACT_APP_ENVIRONMENT','REACT_APP_SUB_DOMAIN']),

    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    })

  ],


  performance: {
    assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
  },

});

webpack.base.babel.js

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');

process.noDeprecation = true;

module.exports = (options) => ({
  // mode: options.mode,
  entry: options.entry,
  output: Object.assign({ // Compile into js/build.js
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/',
  }, options.output), // Merge with env dependent settings
  module: {
      rules: [
        {
          test: /\.js$/, // Transform all .js files required somewhere with Babel
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: options.babelQuery,
          },
        },
        {
          // Preprocess our own .css files
          // This is the place to add your own loaders (e.g. sass/less etc.)
          // for a list of loaders, see https://webpack.js.org/loaders/#styling
          test: /\.css$/,
          exclude: /node_modules/,
          use: ['style-loader', 'css-loader'],
        },
        {
          // Preprocess 3rd party .css files located in node_modules
          test: /\.css$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(eot|otf|ttf|woff|woff2)$/,
          use: 'file-loader',
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-url-loader',
              options: {
                // Inline files smaller than 10 kB
                limit: 10 * 1024,
                noquotes: true,
              },
            },
          ],
        },
        {
          test: /\.(jpg|png|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                // Inline files smaller than 10 kB
                limit: 10 * 1024,
              },
            },
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  enabled: false,
                  // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                  // Try enabling it in your environment by switching the config to:
                  // enabled: true,
                  // progressive: true,
                },
                gifsicle: {
                  interlaced: false,
                },
                optipng: {
                  optimizationLevel: 7,
                },
                pngquant: {
                  quality: '65-90',
                  speed: 4,
                },
              },
            },
          ],
        },
        {
          test: /\.html$/,
          use: 'html-loader',
        },
        {
          test: /\.(mp4|webm)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,
            },
          },
        },
      ],
  },
  plugins: options.plugins.concat([
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    // new webpack.NamedModulesPlugin(),
  ]),
  // stats: 'verbose',
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  node: {
          fs: 'empty'
  },
  performance: options.performance || {},
});

babel config:

"babel": {
    "plugins": [
      "styled-components"
    ],
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ],
      "react",
      "stage-0",
      "es2015"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements",
          "transform-class-properties"
        ],
        "presets": [
          "babili"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }
  },

package.json

webpack: "3.5.5", webpack-dev-middleware: "1.11.0", webpack-hot-middleware: "2.18.0", "babili": "^0.1.4", "uglifyjs-webpack-plugin": "1.3.0", "babel-cli": "6.18.0", "babel-core": "6.21.0", "babel-eslint": "7.1.1", "babel-loader": "6.2.10", "babel-plugin-dynamic-import-node": "1.0.0", "babel-plugin-react-intl": "2.2.0", "babel-plugin-react-transform": "2.0.2", "babel-plugin-transform-class-properties": "6.23.0", "babel-plugin-transform-es2015-modules-commonjs": "6.18.0", "babel-plugin-transform-react-constant-elements": "6.9.1", "babel-plugin-transform-react-inline-elements": "6.8.0", "babel-plugin-transform-react-remove-prop-types": "0.2.11"

Thanks in advance.

0

There are 0 best solutions below