'smth' is already declared in the upper scope

Question

I am using some starter kit for angular. There are webpack, eslint and other useful things.

But, I don't understand how to works with dependency. I have the following code:

import angular from 'angular';

import routing from './app.config';
import auth0 from 'auth0-js';
import jwtHelper from 'angular-jwt';
import store from 'angular-storage';

...

angular.module('app', [
    uirouter,
    ...

    jwtHelper,
    store,

    ...
])
.config(routing)
.run(($state, auth, store, jwtHelper) => {
        some code;      
});

But, I get the following errors:

99:16 error 'auth' is already declared in the upper scope no-shadow
99:22 error 'store' is already declared in the upper scope no-shadow
99:29 error 'jwtHelper' is already declared in the upper scope no-shadow

Hot to use them properly?

Answer 1

Simply rename one of the duplicated declared variable so that your scope doesn't clutter.

You can either rename the upper part

import angularJwt from 'angular-jwt';
import angularStorage from 'angular-storage';

or simply rename the dependencies like: (and keep the original names in the $inject declaration)

routing.$inject = ['$urlRouterProvider', '$locationProvider', 'localStorageServiceProvider'];

export default function routing($urlRouterProviderCustomName, $locationProviderCustomName, localStorageServiceProviderCustomName) {
    $locationProviderCustomName.html5Mode(true);
    $urlRouterProviderCustomName.otherwise('/dash');
    localStorageServiceProviderCustomName.setPrefix('elmahbucket');
}