Application build errors due to UglifyJS

[dangrima90]

I have an Angular application which for some reason when I building the code using AOT I'm getting errors from the UglifyJS plugin.

The following is the error I'm getting:

ERROR in main.e772fb1c4be2017ee939.bundle.js from UglifyJs TypeError: Cannot set property 'fixed' of undefined

After doing a bit of research it seems that this is an issue with UglifyJS not supporting ES6 (Reference). The application still works as all that's happening is that the main.js is not being minified. But ideally I'd like to have a successful build.

I don't know if there's some other dependency that needs updating or whether I need to set up something differently in my config.

This is my UglifyJSPlugin config:

new UglifyJsPlugin({
    parallel: true,
    uglifyOptions: {
        ie8: false,
	ecma: 6,
	warnings: true,
	mangle: true,
	output: {
	    comments: false,
	    beautify: false
        }
    },
})

Webpack Version: 3.8.1
UglifyJS Webpack Plugin: 1.1.8
Angular Version: 4.4.4

[alexander-akait]

@dangrima90 seems bug in uglify-es. Can you found problem code or create minimum reproducible test repo?

[dangrima90]

Thanks for your reply. I'll try setting up a sample project to replicate the issue as the project I'm working on is a private project so I can't really share the code, hope that's okay.

[dangrima90]

So I created a new project (https://github.com/dangrima90/uglifyjs-issue.git) with the same package.json and webpack config, but the project was built successfully :/

Is there a way to output more information with regards to the error? This is the full error that I'm getting.

I'm asking because now I'm thinking that there might be some bit of code from my end that is causing the issue.

[alexander-akait]

@dangrima90 first try to invalidate cache and resintall deps (npm cache clear --force && npm install). If problem still exists enable source map for production build and put error here (uglify-es use source map to point on problem line)

[dangrima90]

@evilebottnawi still no luck :/ I've invalidated the cache and reinstalled everything. To enable the source map would the following config suffice please?

new UglifyJsPlugin({
    parallel: true,
    uglifyOptions: {
        ie8: false,
	ecma: 6,
	warnings: true,
	mangle: true,
	output: {
	    comments: false,
	    beautify: false
        }
    },
    sourceMap: true
})

[alexander-akait]

@dangrima90 devtool: "source-map" (https://webpack.js.org/configuration/devtool/) and enable source-map for babel-loader (or what you loader use for transpiler)

[dangrima90]

@evilebottnawi good morning, sorry for all my questions but I'm at a loss. I've already had "source-map" enabled in the devtool and the loader I'm using is awesome-typescript-loader (https://github.com/s-panferov/awesome-typescript-loader) which unless I'm mistaken uses the setting in the tsconfig.json to check whether to use source maps or not. I'm unable to see what exactly the problem.

Config:

TypeScript Loader - /config/webpack.common.js
(https://github.com/dangrima90/uglifyjs-issue/blob/master/config/webpack.common.js#L124)

tsconfig - /tsconfig.webpack.js
(https://github.com/dangrima90/uglifyjs-issue/blob/master/tsconfig.webpack.json#L9)

Production Config - /config/webpack.prod.js

devtool: "source-map"
(https://github.com/dangrima90/uglifyjs-issue/blob/master/config/webpack.prod.js#L49)

[alexander-akait]

@dangrima90 can you remove step by step modules and core to find problem code, it is very diffucult without test repo

[dangrima90]

Yes of course I understand.. I'll have a look later and try to pinpoint where the issue is. Like I said above most probably it is in an issue from my code. I'll let you know what the outcome will be. Thanks a lot for your support.

[alexander-akait]

@dangrima90 feel free to ping me

[dangrima90]

@evilebottnawi I've finally found the part of the application that's causing the issue - although I don't know what the problem is.

I have a utility class that is used to signify whether the browser tab is active or not:

export class WindowVisibilityChangeUtility {
    private stateKey: string;
    private eventKey: string;
    private keys: Object = {
        hidden: 'visibilitychange',
        webkitHidden: 'webkitvisibilitychange',
        mozHidden: 'mozvisibilitychange',
        msHidden: 'msvisibilitychange'
    };

    private documentVisible: boolean;
    private handlerFunction: EventListenerOrEventListenerObject;

    constructor(handlerFunction: EventListenerOrEventListenerObject) {
        for (this.stateKey in this.keys) {
            if (this.stateKey in document) {
                this.eventKey = this.keys[this.stateKey];
                break;
            }
        }

        this.documentVisible = document[this.stateKey];
        this.visibilityChangeHandler = handlerFunction;
    }

    public get isDocumentHidden() {
        this.documentVisible = document[this.stateKey];
        return this.documentVisible;
    }

    public set visibilityChangeHandler(handlerFunction: EventListenerOrEventListenerObject) {
        this.handlerFunction = handlerFunction;
        document.addEventListener(this.eventKey, this.handlerFunction);
    }
}

This is then being used in one of my components to mute the sound in the application if the tab is not active:

import { WindowVisibilityChangeUtility } from '../../shared/utilities/window-visibility-change.utility';

// other imports ....

@Component({
   ....
)}

export class HomeComponent implements OnInit, AfterViewInit {
    ngOnInit() {
       // other stuff....
        this.onWindowVisibilityChange();
    }

    onWindowVisibilityChange() {
        let windowVisibilityChange = new WindowVisibilityChangeUtility(() => {
            if (!this.globalSoundService.muteSoundSetting) {
                let isDocumentHidden = windowVisibilityChange.isDocumentHidden;
                Howler.mute(isDocumentHidden);
            }
	});
    }
}

[alexander-akait]

@dangrima90 Thanks, in near future i will investigate 👍

[dangrima90]

@evilebottnawi Thank you!

[dangrima90]

Hi @evilebottnawi, any news on this please?

[alexander-akait]

@dangrima90 don't have time right, but seems some globals are rewrites and you get invalid uglified file, can you try to disable mangle (mangle: false in uglifyOptions) and check?

[dangrima90]

@evilebottnawi Thanks for your reply. I did try it, unfortunately the build still failed.

[dangrima90]

Hi @evilebottnawi just to let you know that I've been upgrading my application from Angular 4.4.4 to 5.2.8. During this process I've also updated my webpack config and this issue is not present anymore. I'm not sure what fixed the issue to be honest - but if you require any information from my end let me know.

[alexander-akait]

@dangrima90 👍 Let's close issue, If somebody have same error, feel free to report here.

[RZeni]

App using Angular 6.0.3 and webpack 4.10.2 fails to build when mangle is set to true.

Can reproduce with this repo:
https://github.com/MarkPieszak/aspnetcore-angular2-universal

If the PR for the temporary fix of disabling mangle has been merged you need to set mangle back to true.

[bruce-pinto-mitchell]

Hi,

I am also receiving the same error, funny enough I also made some changes around vendor visibility keys:

I have no idea how this could have caused the issue, but I am seeing the exact same error. Any help would be greatly appreciated.

[alexander-akait]

Switch to terser plugin please