🚫 Fixing SPFx Build Error: “UglifyJs Unexpected Token” When Running gulp bundle --ship

Introduction : 

While packaging your SharePoint Framework (SPFx) solution using the production command: 

gulp bundle --ship

You may encounter a frustrating error message like: 

Error - [webpack] 'dist': form-web-part.js from UglifyJs

Unexpected token: name (CoreFeature) [form-web-part.js:10532,6]

This usually indicates that UglifyJS, the default minifier in SPFx, stumbled upon ES6+ syntax (e.g., class, let, const) that it does not understand. 

In this post, I will guide you through a clean and effective workaround using terser-webpack-plugin, a modern minifier that fully supports ES6+. 

Why This Error Occurs : 

• Root Cause: UglifyJS does not support modern JavaScript (ES6+). 
  
• Impact: Webpack fails during the minification process, stopping the bundle process for production. 
  
• Trigger: Usage of ES6+ syntax like class, const, etc., in your SPFx web part code. 

Solution: Swap UglifyJS with Terser : 

To resolve this, we will: 

1. Add Terser and Webpack merge dependencies. 
2. Update gulpfile.js to override the default SPFx Webpack configuration. 
3. Clean and rebuild your project. 

Step-by-Step Fix : 

Step 1: Install Compatible Dependencies : 

Update your package.json to include: 

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

"webpack-merge": "4.2.1"

Then run the following commands in your terminal: 

npm install terser-webpack-plugin --save-dev

npm install terser-webpack-plugin-legacy --save-dev

npm install webpack-merge@4.2.1 --save-dev

Optional (if Babel is needed for ES6+ transpilation): 

npm install @babel/core @babel/preset-env babel-loader --save-dev

Step 2: Update gulpfile.js :

Modify your gulpfile.js as shown below: 

'use strict';

 

const gulp = require('gulp');

const build = require('@microsoft/sp-build-web');

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

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

 

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.initialize(gulp);

 

build.configureWebpack.setConfig({

 additionalConfiguration: function (config) {

   config.plugins = config.plugins.filter(plugin => !(plugin.options && plugin.options.mangle));

 

   return merge(config, {

     optimization: {

       minimize: true,

       minimizer: [new TerserPlugin()]

     }

   });

 }

});

This code replaces UglifyJS with Terser during the bundle phase. 

Step 3: Clean & Rebuild the Project : 

Run the following commands in sequence: 

gulp clean

gulp build --ship

gulp bundle --ship

Your project should now build successfully, free of any “unexpected token” errors from UglifyJS. 

Optional: Babel Setup (Only If Needed) : 

If your project uses newer JavaScript features not supported in your target environments, consider setting up Babel. However, for the UglifyJS error alone, swapping in Terser is typically enough. 

Conclusion : 

• If you are getting the "UglifyJs Unexpected Token" error while bundling your SPFx project, it is because the default minifier does not support modern JavaScript. By switching to it terser-webpack-plugin, you can fix the issue and bundle your project without errors. Just follow the steps to update your packages and gulpfile, and you will be good to go!
• If you run into any issues while implementing this solution, feel free to drop a comment. I will be happy to help. 

How to Build Branching Logic in SharePoint Online List Forms: A Step-by-Step Guide

Overview

• Creating intuitive forms is key to driving user adoption and collecting high-quality data in SharePoint. One powerful feature that can help you achieve this is branching logic—a simple but effective way to tailor your forms based on user input. 
  
• In this guide, we'll break down what branching logic is, why it's so effective, and how you can easily implement it in SharePoint Online List forms using Microsoft's modern form designer—no coding required!  
  

What Is Branching Logic? 

• Conditional logic, sometimes referred to as branching logic, allows your form to react dynamically to user decisions. The form can show or hide particular fields based on selection, simplifying the process and reducing pointless inputs. 

Example: 

If a user selects “Contractor” from a dropdown, fields related only to contractors will appear. Other sections, like full-time employee information, stay hidden. 

Why Use Branching Logic in SharePoint Forms? 

Key Benefits: 

• Simplifies the User Experience 

→ Only questions that are relevant to them are displayed to users. 

• Reduces Entry Errors 

→ Hidden fields can’t be filled incorrectly. 

• Improves Data Quality 

→ Ensures accurate and relevant inputs. 

• Saves Time 

→ Avoids unnecessary scrolling or input. 

Limitations: 

• Limited Logic Scope 

→ Only supports simple conditions; complex logic (e.g., AND/OR combinations) requires Power Apps. 

• No Backward Conditions 

→ You can't reference future responses to adjust earlier fields. 

• Basic Customization 

→ Visual layout and advanced actions are limited in the built-in SharePoint form designer. 

Use Case: IT Helpdesk Ticket Form 

Let’s say you’re building an IT helpdesk form. Based on the selected Issue Type, you want to display only the relevant fields: 

• Hardware 

→ Show Device Type and Serial Number 

• Software 

→ Show Software Name and Version 

• Network 

→ Show Location and Network Issue Description 

Always show: Priority and Description 

How to Set Up Branching Logic in SharePoint Online List Forms 

🔹 Step 1: Prepare Your SharePoint List 

Make a SharePoint list using the columns listed below: 

• Issue Type (Choice: Hardware, Software, Network) 
  
• Device Type (Choice) 
  
• Serial Number (Single line text) 
  
• Software Name (Single line text) 
  
• Version (Single line text) 
  
• Location (Choice) 
  
• Network Issue Description (Multiline text) 
  
• Priority (Choice) 
  
• Description (Multiline text) 

Note: Define all necessary columns before customizing your form. 

🔹 Step 2: Launch the Modern Form Designer 

1. Go to your SharePoint list. 
   
2. Click on Forms in the command bar, as below:
   
3. Either pick New or Update an existing form.  

🔹 Step 3: Apply Branching Logic 

• Inside the form builder, edit your form's Title, Logo, and Instructions if needed.
  
  
  
• To customize certain fields, use the pencil icon.
• Click "Branching" from the top navigation.
  
  
  
• For each condition: Select the Issue Type field. 
• Add rules like:

  → If Hardware, show Device Type and Serial Number.
  → If Software, show Software Name and Version
  → If Network, show Location and Network Issue Description

• Use the Revert icon if you want to reset to the default form settings.                 

🔹 Step 4: Customize the Appearance 

• On the right-side panel, click Customize.  
  

            → A background theme 
            → Custom submission/closure messages 
            → Start/end availability dates 
            → Email notifications 

🔹 Step 5: Test the Logic 

Before rolling out the form: 

• Preview it by clicking "Preview". 
  
• Choose different Issue Type values. 
  
• Verify that only the correct fields appear for each option. 
  

 Test thoroughly to avoid logic gaps or broken paths. 

🔹 Step 6: Share Your Form 

Once you're satisfied: 

• Click Save (auto-save is usually on). 
  
• Use the Copy Link option to distribute your form to users. 
  

Pros and Cons of SharePoint Branching Logic 

Pros	Cons
Improves form usability by removing clutter	Doesn’t support nested or multi-condition logic
Minimizes user confusion and errors	May not function perfectly on mobile
Saves user time with smart field skipping	Advanced needs require Power Apps
Easy to implement with zero code	Limited layout customization

Tips for Effective Use of Branching Logic 

🔹 Keep it simple: Don’t overwhelm users—limit each field to 2–3 branching rules. 
🔹 Start with a flowchart: Visualize your form logic on paper first. 
🔹 Test all logic paths: Ensure no combination of responses causes a dead end. 
🔹 Upgrade to Power Apps: For calculations, advanced rules, or enhanced UI, Power Apps is your best friend. 

🔹 Add help text: Adding brief clarifications next to fields will help users understand them better. 

Final Thoughts 

• Branching logic is a simple yet powerful way to elevate your SharePoint Online forms. By dynamically showing or hiding fields, you enhance usability, reduce errors, and make your forms much more efficient. 
  
• So next time you're building a SharePoint list form, don’t settle for static input. Leverage branching logic to craft smarter, cleaner, and more user-friendly experiences. 

Mastering SharePoint Online Permissions: A Complete Guide to Normal vs Granular Access Control

Overview 

• When managing access in SharePoint Online, you will encounter two important concepts: normal (predefined) and granular permissions. Understanding both is key to securely and efficiently controlling who can do what on your SharePoint sites. 
  

What are Normal Permissions? 

• Normal permissions are predefined roles in SharePoint that group together multiple specific rights (called granular permissions) into easy-to-manage access levels. These default levels cover most common use cases, making permission management simpler and faster. 

SharePoint Online provides 7 default permission levels such as: 

• Full Control: Complete access can manage everything including permissions, site settings, and content, assigned typically to Site Owners. 
• Design: Provide clients with full control to view, modify, approve, and customize lists and pages within the site. 
• Edit: Enables adding, editing, and deleting lists, libraries, and list items but excludes managing site structure or permissions. 
• Contribute: Can add, edit, and delete list items/documents but cannot delete entire lists or libraries. 
• Read: View content only, No editing rights. 
• View Only: View pages, list items, and documents, cannot download documents (for example: PDFs open in the browser only) 
• Limited Access: Automatically assigned by SharePoint to allow access to a specific item without giving access to the whole site or library. Cannot be assigned manually. 

These predefined levels bundle multiple granular permissions (individual rights) into a single role, making it easier to assign permissions without managing each right separately. 

What are Granular Permissions? 

• Granular Permissions are the most detailed, specific access rights you can assign in SharePoint. Unlike broad roles, granular permissions let you precisely control the actions a user can perform on particular resources. 
  

Categories of Granular Permissions: 

1. List Permissions: Control actions on lists, libraries, and their items/documents Examples include adding items, deleting items, and approving items. 
2. Site Permissions: Control actions on the site level (e.g., Manage permissions, create subsites, manage web sites) 
3. Personal Permissions: Manage user-specific customizations like personal views and editing personal information. 

Common Granular Permissions for Lists: 

Permission Name	Description
View Items	View list items and documents.
Add Items	Permits adding new items to lists and documents.
Edit Items	Edit items and documents.
Delete Items	Delete items and documents.
Approve Items	Grants skill to approve modest versions of items.
Open Items	Grants seeing the source of records with server handlers.
View Versions	Permits viewing past versions of items or documents.
Delete Versions	Enables deletion of previous version.
Create Alerts	Create alerts for list items or documents.
View Application Pages	View forms, views, and application pages.
Cancel Checkout	Undo check-out of a document.
Manage Personal Views	Create, change, and delete personal views.
Manage Lists	Create/delete lists, add/remove columns and views.

Common Site Permissions:  

Permission Name	Description
Manage Permissions	Create or change acceptance levels on the site.
View Web Analytics Data	View usage data reports.
Create Subsites	Create subsites such as team or project sites.
Manage Web Site	Manage site settings, including themes and page layouts.
Add and Customize Pages	Manage HTML or Web Part pages by adding, updating, or deleting them.
Apply Themes and Borders	Apply visual themes or borders site-wide.
Apply Style Sheets	Apply a style sheet to the site.
Create Groups	Create SharePoint groups.
Browse Directories	Enumerate files and folders via SharePoint Designer and WebDAV interfaces.
Browse User Information	View information about users of the site.
Add/Remove Personal Web Parts	Manage personal Web Parts on pages.
Update Personal Web Parts	Update Web Parts on personal pages.
Use Remote Interfaces	Use features that launch client applications.
Use Client Integration Features	Use features such as opening a document in Word or Excel.
Open	Open a website, list, or folder.
Edit Personal User Information	Allows a user to change their own user information (e.g., profile).

Common Granular Permissions for Personal: 

Permission Name	Description
Manage Personal Views	Create and manage personal views of lists.
Add/Remove Personal Web Parts	Modify pages by adding or removing Web Parts as needed.
Update Personal Web Parts	Update Web Parts on your personal pages.

Example use cases: 

• Full control - Site owners or Admin 
• Edit – Team Members contributing to content 
• Read – Visitor or external users. 
• View Only – When users should view documents but not download them (e.g., secure reading rooms) 
• Design – Power users who customize pages and branding. 

These default roles are built from combinations of granular permissions, and you can also create custom permission levels by mixing specific granular rights. SharePoint has about 33 granular permissions grouped into categories as above.  

Why Use Granular Permission? 

Granular permissions offer fine-grained control over access, which is essential when: 

• You want to limit user actions precisely without giving them more access than necessary. 
• There are advanced security and compliance expectations within your organization. 
• You need to customize permission levels beyond the default ones. 
• You want to reduce risk of accidental or malicious changes by restricting sensitive operations 
• Different resources or tasks require different permission sets. 

When and How to use Granular Permissions in SharePoint Online: 

When to Use Granular Permission: 

• If the default permissions don’t suit your organization's access control requirements. 
• When you need to create a custom permission level with specific rights. 
• To implement the guideline of least benefit, giving users as it were the permissions they completely require. 

How to Create a Custom Granular Permission level: 

1. Go to Site Setting: Press the equip symbol, then click on Site Permissions, at that point press on Advanced permission settings. 
2. Open Permission levels: Click Permission Levels at the top menu. 
3. Add a Permission Level: Click Add a Permission Level. 
4. Select Granular Permissions: Select the exact rights you need to incorporate. 
5. Name & Save it: Provide a meaningful name and description. Click Create. 

Assign Your Custom Permission Level: 

To assign your new permission level, follow these steps for users or SharePoint groups: 

1. Go to Site Permissions: Select a user or SharePoint group. 
2. Click Edit User Permissions. Assign your custom permission level. 
3. Save your changes: Ensure changes are saved. 

Benefits of Using Granular Permissions: 

• Security: Controls access to sensitive content and high-impact tasks. 
• Flexibility: Tailors permissions to unique business needs. 
• Compliance: Helps meet regulatory requirements by controlling who can do what. 
• Risk Reduction: Minimizes potential damage from errors or insider threats. 

Additional Tips for Using Granular Permission Effectively: 

• Keep it simple: Using default permission levels helps ensure a straightforward and clear configuration. 
• Use granular permissions only when necessary: Choose granular permissions when you require detailed control. 
• Break permission inheritance if you need to set distinct permissions for a list, library, folder, or item. (Permissions are automatically inherited from the parent site unless explicitly broken.) 
• Use SharePoint Groups: Assign permissions to groups rather than individual users for easier and more efficient management. 
• Regularly review permissions: Perform routine checks to ensure that permissions remain suitable and aligned with current requirements. 
• Enforce least privilege: Implement granular permissions to ensure users have only the necessary access required for their tasks. 
• Consider item-level permissions for sensitive documents or list items requiring restricted access.