I'm having trouble running my Vue.js application on a server. It works fine when I'm running locally on macOS or windows. This is the error I get when running 'npm run dev':
These dependencies were not found:
* @/components/account/Profile in ./src/router/index.js
* @/components/account/Plan in ./src/router/index.js
* @/components/account/Team in ./src/router/index.js
* @/components/account/Integration in ./src/router/index.js
* babel-runtime/helpers/extends in ./src/store/index.js
I have checked that the same version of Vue.js is installed -> vue@2.5.13 + really have no clue how to fix this problem. I'm guessing it's a dependency/OS error because it runs with no errors locally.
Does anyone know to fix this or point me somewhere useful? Any help is hugely appreciated!
Edit***
Contents of Index.js below - I'm using Webpack.
import store from '../store'
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Error404 from '@/components/404'
import Login from '@/components/Login'
import Register from '@/components/Register'
import FreeTrial from '@/components/FreeTrial'
import Product from '@/components/Product'
import Services from '@/components/Services'
import Team from '@/components/Team'
import Pricing from '@/components/Pricing'
import Help from '@/components/Help'
import SharedList from '@/components/SharedList'
import ListView from '@/components/App/ListView'
import Blog from '@/components/Blog'
// Account components, loaded lazily
const AccountSettings = r =>
require.ensure([], () => r(require('@/components/AccountSettings')), 'accountComponents')
const ProfileSection = r =>
require.ensure([], () => r(require('@/components/account/Profile')), 'accountComponents')
const PlanSection = r =>
require.ensure([], () => r(require('@/components/account/Plan')), 'accountComponents')
const TeamSection = r =>
require.ensure([], () => r(require('@/components/account/Team')), 'accountComponents')
const IntegrationSection = r =>
require.ensure([], () => r(require('@/components/account/Integration')), 'accountComponents')
// App components loaded lazily, grouped by the 'appComponents' param
const MainApp = r =>
require.ensure([], () => r(require('@/components/MainApp')), 'appComponents')
const Default = r =>
require.ensure(
[],
() => r(require('@/components/App/Default')),
'appComponents'
)
const Search = r =>
require.ensure(
[],
() => r(require('@/components/App/Search')),
'appComponents'
)
const Templates = r =>
require.ensure(
[],
() => r(require('@/components/App/Templates')),
'appComponents'
)
const Lists = r =>
require.ensure(
[],
() => r(require('@/components/App/Lists')),
'appComponents'
)
const Outreach = r =>
require.ensure(
[],
() => r(require('@/components/App/Outreach')),
'appComponents'
)
import { Message } from 'element-ui'
Vue.use(Router)
export const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: '404',
meta: { title: `Page not found` },
component: Error404
},
{
path: '/help',
name: 'Help',
meta: { title: `Help` },
component: Help
},
{
path: '/product',
name: 'Product',
meta: { title: `Product` },
component: Product
},
{
path: '/services',
name: 'Services',
meta: { title: `Services` },
component: Services
},
{
path: '/team',
name: 'Team',
component: Team
},
{
path: '/pricing',
name: 'Pricing',
meta: { title: `Pricing` },
component: Pricing
},
{
path: '/blog',
name: 'Blog',
meta: { title: `Blog` },
component: Blog
},
{
path: '/login',
name: 'Login',
meta: { title: `Login` },
component: Login
},
{
path: '/register',
name: 'Register',
meta: { title: `Register` },
component: Register
},
{
path: '/trial',
name: 'FreeTrial',
meta: { title: `Free trial` },
component: FreeTrial
},
{
path: '/viewlist/:id',
name: 'SharedList',
meta: { title: `View shared list` },
component: SharedList
},
{
path: '/app',
component: MainApp,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access the app because you're not logged in`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '/account',
component: AccountSettings,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access your profile because you're not logged in. Please log in again`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '',
name: 'ProfileSection',
meta: { title: `Edit profile` },
component: ProfileSection
},
{
path: 'plan',
name: 'PlanSection',
meta: { title: `Manage plan` },
component: PlanSection
},
{
path: 'team',
name: 'TeamSection',
meta: { title: `Manage team` },
component: TeamSection
},
{
path: 'integration',
name: 'IntegrationSection',
meta: { title: `Integration` },
component: IntegrationSection
}
]
},
{
path: '',
name: 'AppDefault',
meta: { title: `Explore saphire` },
component: Default
},
{
path: 'search',
name: 'AppSearch',
meta: { title: `Search influencers` },
component: Search
},
{
path: 'templates',
name: 'AppTemplates',
meta: { title: `Manage templates` },
component: Templates
},
{
path: 'lists',
name: 'AppLists',
meta: { title: `Manage lists` },
component: Lists
},
{
path: 'list/:id',
name: 'ListView',
meta: { title: `View list` },
component: ListView
},
{
path: 'outreach',
name: 'AppOutreach',
meta: { title: `Outreach` },
component: Outreach
}
]
}
]
})
router.beforeEach((to, from, next) => {
// Change title based on meta.title property
if (to.meta.title) {
document.title = `saphire | ${to.meta.title}`
} else {
document.title = `saphire`
}
// Checking if inside or outside app and assigning the result to global store variable
if (to.matched.length > 0) {
to.matched[0].path === '/app'
? store.commit('setAppState', true)
: store.commit('setAppState', false)
}
next()
})
export default router
