[Resolved] - "[webpack] 'dist': web-part.js from UglifyJs Unexpected token: name" while building the SPFx package

Introduction

We implemented a Training Management System in SharePoint Online using SharePoint Framework (SPFx) for a Postal and Parcel company based out of Melbourne, Victoria, Australia. We were using all the latest npm packages in the web part and the web part was also working in an expected manner while testing in the workbench. But when we started building the package, it started throwing the error regarding UglifyJs for compiling ES6 code.

So, In this blog, we will learn how to resolve this error and what packages we can install so that it can compile ES6 code.

Issue

When we started with the deployment process and while running the "gulp bundle --ship" command, it throws an error message as "[webpack] 'dist': web-part.js from UglifyJs Unexpected token: name". The reason was the web part was using ES6 code for managing the array objects and UglifyJs was unable to compile the ES6 code.

Resolution

We will be using the below two npm packages as followed.

1. terser-webpack-plugin

This npm package uses "terser" which is itself a JavaScript parser and a compressor toolkit for ES6+. So, by using this package and adding its required dependencies in our solution, it will remove the UglifyJs plugin from the build chain and will also compile the ES6 code which will help us in building our package successfully.

2. webpack-merge

This npm package basically merges the array objects by converting them into a function, then performs its process, and returns the function again, this will help in compiling the ES6 code and helps us in building our package successfully.

Now, let us start with the steps to be followed.

Step 1: In the package.json file, add inside the "devDependencies" section, add the below two packages.

 "terser-webpack-plugin-legacy": "1.2.3",

    "webpack-merge": "4.2.1"

Step 2: In the gulpfile.js, add the below two import lines.

const merge = require('webpack-merge');

const TerserPlugin = require('terser-webpack-plugin-legacy');

Step 3: Now, we need to add the below code in the gulpfile.js just before the line "build.initialize(gulp)". This is the custom configuration code that will help in the process of compiling.

build.configureWebpack.setConfig({

  additionalConfiguration: function (config) {

    let newConfig = config;

    config.plugins.forEach((plugin, i) => {

      if (plugin.options && plugin.options.mangle) {

        config.plugins.splice(i, 1);

        newConfig = merge(config, {

          plugins: [

            new TerserPlugin()

          ]

        });

      }

    });

    return newConfig;

  }

});

Step 4: Finally run the command "npm i" and this will install both the packages which we have added in the package.json file.

Conclusion:

Now, we are all set to build our package by running the command "gulp bundle --ship" and our issue will be resolved. Happy Coding!!

If you have any questions you can reach out our SharePoint Consulting team here.