svgi fails to build in webpack

[minademian]

Unable to build my app. Get this error message:

ERROR in 0c02a418986ac76c2f49.app.js from UglifyJs
Unexpected token: punc ()) [0c02a418986ac76c2f49.app.js:11031,18]

webpack.config.js

const path               = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin     = require('uglifyjs-webpack-plugin');
const webpack            = require('webpack');
const sass               = require('node-sass');

const config = {
  devtool: 'inline-source-map',
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new UglifyJSPlugin({
      beautify: false,
      mangle: false,
      sourceMap: true,
      compress: { screw_ie8: true },
      comments: false
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[hash].vendor.js',
      minChunks: 'Infinity'
    }),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.HotModuleReplacementPlugin()
  ],

  entry: {
    app: './src/init.js',
    vendor: './src/vendor.js'
  },

  node: {
    fs: 'empty',
    child_process: 'empty'
  },

  output: {
    filename: '[chunkhash].app.js',
    path: path.resolve(__dirname, 'dist')
  },
  
  devServer: {
    contentBase: 'dist/',
    historyApiFallback: true,
    compress: true,
    clientLogLevel: 'info',
    port: 1337,
    inline: true,
    filename: 'bundle.js',
    publicPath: '/',
    watchOptions: {
      aggregateTimeout: 0,
      poll: 500
    },

package.json

{
[ redacted ]
  "author": "Mina Demian",
  "main": "index.js",
  "dependencies": {
    "@uirouter/angularjs": "1.0.3",
    "angular": "1.5.5",
    "angular-local-storage": "0.5.2",
    "angular-sanitize": "1.5.5",
    "angular-translate": "2.15.1",
    "lodash": "^4.17.4",
    "simple-svg-tools": "^1.0.5",
    "svgi": "^1.1.0",
    "ua-parser-js": "0.7.12"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "browser-sync": "^2.18.12",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.29.0",
    "jasmine": "^2.6.0",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "serve": "^6.0.2",
    "style-loader": "^0.18.2",
    "uglify-es": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "url": "^0.11.0",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1",
    "webpack-vendor-chunk-plugin": "^1.0.0"
  },
  "scripts": {
    "test": "eslint src && jasmine",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
[ redacted ]
}

[Angelmmiguel]

Hello @minademian,

Thank you for report the issue. I didn't notice the project is not compatible with browser environments. The main issue is svg.js tries to import node.js libraries like path and fs that are not available in a browser environment. To solve this, I need to extract these logic to the binary file or make it conditional in the svg.js. I think this will solve your issue.

Anyway, I'll solve this error in the next patch. I'll notify you when it's ready :)