Error while importing a data provider that uses VueResource before Vue.use(VueResource)

Question

I was trying to import the store in the bootstrap file of Vuejs 2 app, inside the store, I'm using a data provider which uses VueResource... Doing so, I must import the store which uses VueResource before actually calling Vue.use(VueResource) My code is like below:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Vuex from 'vuex'
import store from './store/index'

Vue.use(Vuex)
Vue.use(VueResource)
Vue.use(VueRouter)

//let store = require('./store/index');


const router = new VueRouter({
  mode: 'history',
  routes: [{
    'name': 'home',
    path: '/',
    component: require('./components/Home.vue')
  }, {
    'name': 'profile',
    path: '/profile',
    component: require('./components/Profile.vue')
  }, {
    'name': 'login',
    path: '/login',
    component: require('./components/Login.vue')
  }, {
    'name': 'new',
    path: '/new',
    component: require('./components/New.vue')
  }, {
    'name': 'signup',
    path: '/signup',
    component: require('./components/Signup.vue')
  }, {
    'name': 'logout',
    path: '/logout'
  }, {
    'name': 'article',
    path: '/article/:id',
    component: require('./components/Article.vue')
  }]
})

router.beforeEach((to, from, next) => {
  console.log(to, from)
  if (!localStorage.getItem('user') && (to.name === 'profile' || to.name === 'home' || to.name === 'article' || to.name === 'new')) {
    console.log('login first!')
    next('/login')
  } else if (to.name === 'logout') {
    console.log('logout')
    store.dispatch('updateProfile', null)
    localStorage.removeItem('user')
    next('/login')
  } else {
    next()
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  render: h => h(require('./App'))
})