Reuses variables causing undefined

[SamanthaAdrichem]

• Operating System: Windows 10
• Node Version: 10.15.3
• NPM Version: 6.4.1
• webpack Version: 4.27.1
• terser-webpack-plugin Version: 1.2.3

Expected Behavior

We inject a variable using angularJS, and re-use it later in the code. Without minification it works.
Problem is I can't supply too much information. Just taught i might tell you, you have a variable collission issue.

Actual Behavior

The minifier creates a function var n, and then inside the function where it is used a new local var n, which is undefined and assigns n to n, causing it to be undefined if minified.
However if we enable sourcemap-cheap-eval, it does work.

Code

This is var too complex or big with file-loaders etc. But for the terser it's at:

devtool: APP_ENV === 'development'
		? 'cheap-module-eval-source-map'	// Source maps + reference to source map file for development
		: 'hidden-source-map',				// Source maps without reference to source map file in original source for production

How Do We Reproduce?

I have no clue,

all i can tell you is this is our code

AdvertiserMaterialDetailModalController.$inject = [
	'$rootScope',
	'$scope',
	'adId',
	'AdvertiserMaterialDetailModal',
	'campaignId',
	'DataAdvertisersMaterialAds',
	'DataAdvertisersPrograms',
	'ElementsMessagesHelper',
	'PreviewBannerEvent'
];

function AdvertiserMaterialDetailModalController(
	$rootScope,
	$scope,
	adId,
	AdvertiserMaterialDetailModal,
	campaignId,
	DataAdvertisersMaterialAds,
	DataAdvertisersPrograms,
	ElementsMessagesHelper,
	PreviewBannerEvent
) {

	let $ctrl = this;
	let _watches = [];
	let _adId = adId;

	$ctrl.ad = null;
	$ctrl.bannerContentLoaded = false;
	$ctrl.bannerIsExpanded = false;
	$ctrl.campaign = null;
	$ctrl.messageHelper = ElementsMessagesHelper.getInstance('newsMessages');

	$ctrl.close = close;
	$ctrl.getBannerHeight = getBannerHeight;

	$ctrl.$onInit = onInit;

	function onInit() {
		$scope.$on('$destroy', onDestroy);
		addWatches();
		loadData();
	}

	function getBannerHeight(){
		return $ctrl.ad.height + 40 + 'px';
	}

	function loadData() {
		startLoader();
		loadAd(_adId)
			.then(loadCampaign)
			.then(setCampaignData)
			.catch($ctrl.messageHelper.errorFunction)
			.finally(stopLoader);
	}

	function startLoader() {
		$ctrl.showLoading = true;
	}

	function stopLoader() {
		$ctrl.showLoading = false;
	}

	function loadAd( adId ) {
		return DataAdvertisersMaterialAds.getById( adId );
	}

	function loadCampaign( response ) {
		$ctrl.ad = response;
		return DataAdvertisersPrograms.getById( campaignId );
	}

	function setCampaignData( response ) {
		$ctrl.campaign = response;
		return response;
	}

	function close() {
		AdvertiserMaterialDetailModal.hide();
	}

	function expandBanner(event, ad) {
		if (ad.id === $ctrl.ad.id) {
			$ctrl.bannerIsExpanded = true;
		}
	}

	function collapseBanner(event, ad) {
		if (ad.id === $ctrl.ad.id) {
			$ctrl.bannerIsExpanded = false;
		}
	}

	function bannerContentLoaded(event, ad) {
		if ($ctrl.ad && ad.id === $ctrl.ad.id) {
			$ctrl.bannerContentLoaded = true;
		}
	}

	function addWatches() {
		_watches.push($rootScope.$on(PreviewBannerEvent.EVENT_EXPAND, expandBanner));
		_watches.push($rootScope.$on(PreviewBannerEvent.EVENT_COLLAPSE, collapseBanner));
		_watches.push($rootScope.$on(PreviewBannerEvent.EVENT_BANNER_CONTENT_LOADED, bannerContentLoaded));
	}

	function onDestroy() {
		_watches.map( function( watch ) {
			watch();
		} );
		_watches = null;
		ElementsMessagesHelper.destroyInstance($ctrl.messageHelper);
	}

}

and this is the minified result

function a(e, t, n, i, a, s, r, o, l) {
        var c = this
          , d = [];
        function u() {
            c.showLoading = !1
        }
        function p(e) {
            return c.ad = e,
            r.getById(a)
        }
        function m(e) {
            return c.campaign = e,
            e
        }
        function g(e, t) {
            t.id === c.ad.id && (c.bannerIsExpanded = !0)
        }
        function h(e, t) {
            t.id === c.ad.id && (c.bannerIsExpanded = !1)
        }
        function f(e, t) {
            c.ad && t.id === c.ad.id && (c.bannerContentLoaded = !0)
        }
        function v() {
            d.map(function(e) {
                e()
            }),
            d = null,
            o.destroyInstance(c.messageHelper)
        }
        c.ad = null,
        c.bannerContentLoaded = !1,
        c.bannerIsExpanded = !1,
        c.campaign = null,
        c.messageHelper = o.getInstance("newsMessages"),
        c.close = function() {
            i.hide()
        }
        ,
        c.getBannerHeight = function() {
            return c.ad.height + 40 + "px"
        }
        ,
        c.$onInit = function() {
            t.$on("$destroy", v),
            d.push(e.$on(l.EVENT_EXPAND, g)),
            d.push(e.$on(l.EVENT_COLLAPSE, h)),
            d.push(e.$on(l.EVENT_BANNER_CONTENT_LOADED, f)),
            c.showLoading = !0,
            (n = n,
            s.getById(n)).then(p).then(m).catch(c.messageHelper.errorFunction).finally(u);
            var n
        }
    }

As you can see at the top, n is a top function argument
As you can see at the bottom in c.$onInit, loadData is injected here, var n is declared.

[alexander-akait]

Looks problem in terser (we just wrapper for tool), anyway can you create minimum reproducible test repo?

[alexander-akait]

Close due inactivity, problem in terser, feel free to any feedback